Can you have a video file for desktop view and a separate video file for mobile/ tablet view?

Can you have a video file for desktop view and a separate video file for mobile/ tablet view?

christiebianco
Tourist
7 0 1

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!

Reply 1 (1)

gr_trading
Shopify Partner
2045 149 206

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.

For any custom development WhatsApp or connect at Email ID: support@grtrading.in for quick consultation. | Shopify Free codes
To support Buy Me a Coffee