Black Bars under video

Design help Custom code
1

Hi all,

I’m trying to get a video container to always to resize to the height and width of the video, I had to put custom code in to get the youtube video to play with sound. What I’m finding is that it has a black bar at the bottom, 100% height doesn’t work and neither does auto (those have zero effect to anything). I have to put in XX% VH in to get any movement of the container height, but then when I do that and adjust the browser window it chops off the video, so loses responsiveness?

My Code Embed below…

Can’t figure out what I’m doing wrong? And AI keeps telling me to do the wrong thing (grrr), Any help would be greatly appreciated.

Thanks
Anton

Here is my site Read-Only Link: Webflow - Work Rebuild

2

Hi Anton, taking a quick glance, you’re trying to force the iframe to 1:1 aspect.
YouTube videos are generally 16:9 aspect so you’re either going to clip the sides or get black bars, depending on how YouTube’s iframe content is setup.

Historically you’d want something like this to get the 16:9 aspect;

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
  <iframe
    src="https://www.youtube.com/embed/8SdjrHyZz64?loop=1&playlist=8SdjrHyZz64&rel=0&modestbranding=1"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen
  ></iframe>
</div>

But modern browsers can probably handle;

<iframe
  src="https://www.youtube.com/embed/8SdjrHyZz64?loop=1&playlist=8SdjrHyZz64&rel=0&modestbranding=1"
  width="100%"
  height="100%"
  style="aspect-ratio: 16 / 9"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen
></iframe>
3

Use aspect-ratio: 16/9 on the iframe wrapper instead of forcing VH , that keeps it responsive without cropping. Had this pop up on a client site recently, and switching to a ratio-based container removed the black bars instantly.