How do I use different videos for my page between mobile and desktop?

[Yizon]

Hi,

I would like to use a different video (Vertical format) on my shopify home page for people who are browsing with their phone, and keep the horizontal video for desktop browsing. Is that possible? If so, how can I achieve it?

Here is the link to my website: www.yizonjewellery.com

I'm using the Kingdom theme.

Thank you!

[MaxDesign]

Unfortunately, there is no browser standard that supports changing a video source based on screen size. It is possible for images using the <picture> tag, but video has no such things.

So you'd have to rely on a developer for this one, as I have not ever seen any theme add this kind of feature. It's easy enough: with a small script, we can toggle the source of the video based on which screen size the user is browsing. This script should be placed right after the video element for performance purposes (since your video is above the fold). There are still things to consider such as how the video ratio will be handled by the theme and some details like that, hence you need a developer.