Banner Video size mobile vs desktop

[bobatz]

Hello, I have a banner video on my homepage. Unfortunately the formatting for the desktop version looks very bad. That's why I want to set two different videos for the mobile and the desktop view. How does it work?

my shop: www.bitterkalt.com

[BSSCommerce-B2B]

@bobatz, You could add two different banners next to each other. I will send you the code to hide one on desktop and show the other, and vice versa.

[bobatz]

that would be fantastic! I am new to shopify. would be great if you can explain in detail what i need to do! 🙂

[BSSCommerce-B2B]

Please add 2 different banners 1 for mobile and 1 for desktop like this

[BSSCommerce-B2B · Accepted solution]

@bobatz, follow these steps

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
@media only screen and (max-width: 767px) {
  #shopify-section-template--23782627541333__section_hero_video_3mfXD3 {
    display: none;
  }
  #shopify-section-template--23782627541333__section_hero_video_bmCRkK {
    display: block;
  }
} 
@media only screen and (min-width: 768px) {
  #shopify-section-template--23782627541333__section_hero_video_3mfXD3 {
    display: block;
  }
  #shopify-section-template--23782627541333__section_hero_video_bmCRkK {
    display: none;
  }
}
</style>

[bobatz]

wow, thank you so much!!! perfect!

[LizHoang]

Hi @bobatz 

Would you mind sharing with me which theme that you are using now? 

I will assist you with your question.

Avada team

[bobatz]

hey, I am using the Theme called Venue. I made two videos now: the first one is for the desktop version and the second one for the mobile version. Thanks in advcance!