Fix Squished Shopify Mobile Videos | Two Video Banner Solution

Hey everyone! I recently stumbled upon a really common, yet frustrating, issue in the Shopify community forums that I just had to share some insights on. It’s about those pesky video banners that look absolutely stunning on desktop but turn into a squished, sad mess on mobile. Sound familiar? You’re definitely not alone!

Our friend b3thanyj3an kicked off a great discussion with this exact problem. She was working on updating her store, www.thedustybroomcloset.com, and noticed her new desktop video banner was perfect, but the mobile version was, well, squished. She was using the standard 'Video Banner' section and wasn't sure if there was a better way.

Why Does This Happen? (And How to Start Fixing It)

Mateo-Penida jumped in right away with some excellent context. This issue is super common because videos are often recorded in a wide landscape ratio (think 16:9), and when a mobile device tries to cram that into a narrow vertical space, things get distorted. It’s like trying to fit a widescreen movie onto an old square TV – it just doesn’t quite work!

Mateo-Penida offered a few initial ideas that are always worth checking first:

Check Your Theme Settings: Dive into your theme editor (which is now called 'Edit theme' instead of 'Customize' – more on that in a sec!). Go to your Video Banner section and look for settings like "Video height" or "Adapt section height to video." Sometimes, simply switching it to "Adapt to video" can work wonders.
The Better Fix: Use Different Videos! This is often the gold standard. Create or crop a version of your video specifically for mobile, ideally in a vertical (9:16) or square (1:1) format. Many modern themes have a built-in option to upload separate videos for desktop and mobile. If yours does, this is usually the easiest route.
Fallback Options: If video just isn't cooperating, consider replacing the Video Banner with a 'Slideshow' or 'Image banner' section using a compelling still frame from your video. A strong static image can sometimes be more effective on mobile than a poorly displayed video.

As a quick side note, Mateo-Penida also spotted some spam reviews on b3thanyj3an's store from a "carolina peter" and recommended deleting them from her Judge.me dashboard. Always great to have an extra pair of eyes on your store's health!

When Your Theme Doesn't Play Nicely: The Two-Section CSS Approach

Now, b3thanyj3an tried to implement the separate video idea, but hit a snag: her theme didn't seem to have a specific option for a 'mobile video' in the banner settings. This is where the discussion got really helpful, thanks to tim_tairli stepping in with a more advanced, but highly effective, custom code solution.

First, a quick clarification on the Shopify admin interface: if you've noticed 'Customize' is gone, don't worry! As tim_tairli pointed out, what was once called 'Customize' is now simply 'Edit theme'. Same great functionality, just a new name.

The core of tim_tairli's solution, which I've seen work wonders, involves creating two separate Video Banner sections: one specifically for desktop and one for mobile. Then, you use a little bit of Custom CSS within each section to tell Shopify when to show or hide them.

Step-by-Step for Separate Desktop & Mobile Videos with Custom CSS:

Prepare Your Videos: Make sure you have two versions of your video: one optimized for desktop (e.g., 16:9 landscape) and another optimized for mobile (e.g., 9:16 vertical or 1:1 square). Upload both to your Shopify 'Files' section.
Add Two Video Banner Sections:
- Go to your Shopify Admin > Online Store > Edit theme.
- On your homepage (or whichever page you want the video banner), add a new 'Video banner' section. Let's call this your Desktop Video Banner.
- Immediately below it, add another 'Video banner' section. This will be your Mobile Video Banner.
Configure Each Section:
- For the Desktop Video Banner: Upload your desktop-optimized video. Set any text, overlays, or settings you want for desktop. Scroll to the very bottom of this section's settings, and you should find a 'Custom CSS' field.
  Paste the following code into the 'Custom CSS' field for your Desktop Video Banner. This tells the section to hide itself when the screen width is 749 pixels or less (i.e., on most mobile devices):
```
@media screen and (max-width: 749px) {
  .shopify-section-video-banner {
    display: none !important;
  }
}
```
- For the Mobile Video Banner: Upload your mobile-optimized video. Configure its specific text and settings. Again, scroll to the bottom of this section's settings for the 'Custom CSS' field.
  Paste the following code into the 'Custom CSS' field for your Mobile Video Banner. This tells the section to hide itself when the screen width is 750 pixels or more (i.e., on desktop or larger tablets):
```
@media screen and (min-width: 750px) {
  .shopify-section-video-banner {
    display: none !important;
  }
}
```
Test Your Changes: In the theme editor, you can use the mobile icon at the top to switch to mobile view, or simply resize your browser window on your desktop. You should see the desktop video disappear and the mobile video appear, looking perfectly formatted!

Here are some of the screenshots b3thanyj3an shared, showing her settings and the 'Edit theme' option:

Answer/Reply 1 by b3thanyj3an:

OK, I’m working on trying to fix this. I made two separate videos so that I can use one for desktop and one for mobile. I don’t have the option when I’m editing the video banner for a mobile one. One’s only giving me the option for the desktop.

don’t mind the photo quality I’m working on the desktop and I just took them using my phone lol. I also took care of those reviews that you mentioned. Thank you! Never would have seen them if you didn’t say anything.

Read full topic

Answer/Reply 2 by b3thanyj3an:

Ok I made both videos just how you told me to. Uploads them to the files section. This is were I got stuck. You said go to online store > theme > customize. Ever since my Shopify updated I don’t have that anymore. So I have online store and then it says edit theme. *see picture* is this where you want me to click? Then when I’m into customize my website I go to the template side where it says video banner if I click it, I don’t have the option for a mobile video. I only have the option to put in the desktop. So is this the area where you want me to customize the CSS?

I’m sorry for so many questions. I appreciate any help. You’re willing to give me though. Don’t mind the federal quality. I’m working on the desktop and I took a picture from my phone. lol

Read full topic

A Note on Theme Versions

One thing tim_tairli also flagged was that b3thanyj3an's Dawn theme was version 4.0.0, while the current version is much newer (15.4.1!). This is super important because older theme versions might lack certain features or settings that newer ones have. If you're running an older theme, it might be worth considering updating it (always back up your theme first!) or at least checking for updates. Newer themes often come with better mobile responsiveness and more built-in options.

So, whether you're dealing with a squished video or just want more control over how your brand looks on every device, these tips should set you on the right path. It really highlights how valuable the Shopify community is for finding solutions to common problems – sometimes you just need to ask, and a helpful expert will chime in!

Shopify Video Banner Fix: No More Squished Mobile Videos!