I am currently using a 16:9 video on the homepage for desktop, which I uploaded with the use of the standard Shopify Vimeo/Youtube integration. However, 16:9 does not look good on mobile, hence the reason 99% of video’s on Instagram are either 1:1, 4:5 or 9:16 nowadays. Therefore, I want to use a different video with aspect ratio 4:5 on the mobile homepage.
To summarize:
Desktop-homepage: 16:9 video from Vimeo/Youtube (using standard Shopify function)
Mobile-homepage: 4:5 video from Vimeo/Youtube (using standard Shopify function)
I would like to brainstorm with someone who is capable of implementing such changes to the theme code. I know that mobile-only modifications are surely possible by using media-queries. However, these media-queries are usually used to control, block or display media on mobile/desktop for the same media content. Instead, I want to be able to upload a different video for desktop, and a different video for mobile.
This means (I guess) that I need an additional Vimeo/Youtube section in order to be able to upload a second video. This, in combination with media-queries in order to display the right video (4:5 for mobile and 16:9 for desktop) for the right screen-width.
Therefore, I need someone with the right experience to implement and structure such changes. I am willing to pay.
