Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
hi there! I am using the Video Background section in Dawn theme. My goal is to be able to have a video link that will display my desktop screens at 16:9, and then a separate video file that will display on mobile devices at 2:3? I was able to find resources to add code to image banner for mobile input (pictured).
Wondering if anyone on here has done the same for Video Background. I am using the video as a hero on this landing page: https://ilwil-period.com/
My current "hack" was just using a 2:3 video but I would love to be able to input both files. Thank you!
Hi @christiebianco ,
This is not complicated all you have to update your current section schema to add video for mobile version. Then handle the visibility for respective video using CSS.
Please refer the video below how we did to implement the image for section.
Performance Note: --
Since video is too heavy to run in background my suggestion would be to use script which will check the screen type first then show the appropriate video. that means if user is on desktop then desktop video or mobile.
however maintaining it using CSS is very easy.
Let me know if you are looking someone to implement this.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025