Hero Banner video getting cropped

[allensamuel]

I have 2 different formats available for my video - 4x5 and 16x9 for mobile and desktop respectively. However for some reason shopify is zooming into the video which results in me losing out important elements of the video. 

I have 2 questions - 

1. How can I ensure that the weird zooming in/cropping does not happen?

2. Is there any way I can set my video in such a way that it always full screen? What specs should I get my video made in? What px height should I set the banner to?

Please help me out here, thanks!

[atominte]

Quite hard to suggest without the url, but probably following steps might help:

1. Try to fix the zooming mess

- Stick to one format like 16x9 and keep the good stuff in the middle so it doesn’t get chopped.

- Toss this CSS into Shopify’s customizer:

video { object-fit: contain !important; width: 100%; height: auto; }

- Peek at your theme settings - look for something like “keep aspect ratio” and turn it on.

2. and go Full-Screen

- In the customizer, crank the section to “full screen” or slap this CSS in:

.video-section { height: 100vh; width: 100vw; } video { object-fit: cover; }

- Make your video 16x9 (1920x1080px), MP4, and keep it under 20MB so it loads fast.

- Banner height? Aim for 600-1080px, or just go 100vh for that full-screen vibe.

Test it out on your phone and laptop - should look slick! Let me know if you’re stuck.

[allensamuel]

Here's my store preview -
https://0bcygwjn0756jg0b-91752923485.shopifypreview.com
It has no password set. Thank you.

[atominte · Accepted solution]

Oki doki, let's try to fix it. 

Prevent Zooming/Cropping:
- Add this CSS (YouTube iframes don’t support object-fit):

.superpowered-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16x9 default */
}
.superpowered-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .superpowered-video {
    padding-bottom: 125%; /* 4x5 for mobile */
  }
}

- Center key elements in both videos to avoid cropping.

Make It Fullscreen + Swap Links:
- Use this CSS:

.superpowered-video {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
.superpowered-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

- Add this JavaScript to swap the mobile link (replace [4x5-video-id] with the actual ID): 

const iframe = document.querySelector('.superpowered-video iframe');
const desktopsrc='https://www.youtube.com/embed/8Vm4F86xs-o?rel=0&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1&mute=1&playsinline=1&controls=0&disablekb=1&iv_load_policy=3&loop=1&playlist=8Vm4F86xs-o';
const mobilesrc='https://www.youtube.com/embed/[4x5-video-id]?rel=0&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1&mute=1&playsinline=1&controls=0&disablekb=1&iv_load_policy=3&loop=1&playlist=[4x5-video-id]';

if (window.matchMedia('(max-width: 767px)').matches) {
  iframe.src=mobileSrc;
} else {
  iframe.src=desktopSrc;
}

window.addEventListener('resize', () => {
  iframe.src=window.innerWidth <= 767 ? mobileSrc : desktopSrc;
});

Add the JavaScript to your theme’s <script> section or a custom JS file. Hope it helps. 

NB: There are specialized business-oriented video hosting platforms that support object-fit and handle many such tasks out of the box! ˆ_^ 

[allensamuel]

Thank you! This worked well. 

[Zoeyharp]

Hi Allensamuel,

Kindly provide your store URL for proper check out.

Best regards.

[Moeed]

Hey @allensamuel 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[allensamuel]

Here's my store preview -
https://0bcygwjn0756jg0b-91752923485.shopifypreview.com
It has no password set. Thank you.

[DaisyVo]

Hi @allensamuel I see it look good. Can you share the image that you want?