Hero Banner video getting cropped

Store Design
7

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 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! ˆ_^