To optimize the video resolution and file size i want to be able to prompt one video file for desktop and another for mobile. To keep the website somewhat lean i dont want the user to have to load the video twice while only one is shown and the other hidden.
Im trying to make the website look good on both mobile and desktop while keeping it as lightweight as possible.
The current video is about 4:3 and about a 12mb file. On mobile this format doesn’t look good and the file is also heavy for a phone to load.
If possible id like a solution that keeps the current video for desktop while if viewed by a phone then a different and cropped video is prompted. This to reduce file space and make it look better. Im thinking something like 1:1 and I would crop that separately in a video editing software.
It would be counterintuitive if desktop and mobile would have to load both versions while a hide/show command would dictate what is being prompted. I just need something that promts a specific video file depending on desktop/mobile.
I followed it and then changed the new sections into two custom liquid sections so I could add one video for desktop and another for mobile.
The sections work, however, currently the website is showing both the video files stacked.
I guess it is because the guide is meant for the Debut theme and I have Dawn.
There was a snippet of code in the guide to be inserted into ‘theme.css’ but that doesn’t exist in Dawn, I tried ‘base.css’ among others but without success.
What code do I need and where does it need to be to in order to achieve this?
Is it for sure that this method wont cause the user to load both the video files even though only one is shown and the other hidden?
Did you ever solve this? I have added a custom liquid section with code to display video on homepage but am looking for code so that I can have an alternative video play (different aspect ratio) for those viewing on mobile. Can anyone help?