Banner Video size mobile vs desktop

Technical Q&A

Topic summary

A user wants to display different banner videos for mobile versus desktop versions of their Shopify homepage because the desktop formatting looks poor with a single video.

Solution Provided:

  • Add two separate video banners (one for mobile, one for desktop)
  • Insert custom CSS code into the theme.liquid file above the </head> tag to hide/show banners based on device type
  • The code uses media queries to control visibility on different screen sizes

Steps to implement:

  1. Navigate to Shopify Admin → Online Store → Themes → Edit code
  2. Locate the theme.liquid file
  3. Add the provided CSS code snippet

Current Status:
The original poster successfully implemented the solution. However, another user (using the Publisher theme) reports the code isn’t working—both videos display on all devices. This suggests the solution may be theme-dependent and requires further troubleshooting for different Shopify themes.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

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

2

@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.

3

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

4

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

BSSCommerceB2B_0-1730036751803.png
BSSCommerceB2B_0-1730036751803.png408×593 113 KB

5

Hi @bobatz

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

I will assist you with your question.

Avada team

6

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!

7

@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
8

wow, thank you so much!!! perfect!

1 Like
9

Hey! I added the code but it doesn’t seem to work for me. It keeps showing both video’s on desktop and mobile. Could you please help me? I’m using thema Publisher for reference.