Different media content (video) on homepage for mobile and desktop (Blockshop Theme)

[obshop]

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.

[KetanKumar]

@obshop 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[atilinac]

Hi there, did you find any solutions to the problem? I have the same issue trying to find a way. I would appreciate your help. 

[KetanKumar]

@atilinac 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.