Css: Fluid youtube embed

Follow me on Youtube

Fluid youtube embed

Earlier this week i read a tweet about fluid youtube embeds. In his example he used TailwindCss and since i'm not a very big css framework fan i thought it would be a good idea to make a post/video on how we can create this with plain vanilla css. So here we are! :)

Iframe embed

Youtube embeds are nothing more then a simple iframe, so lets add that as our markup.

<div class="fluid-yt">
  <iframe
    src="https://www.youtube.com/embed/IuhcUosPHMI"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  ></iframe>
</div>

You can grab these iframe embeds straight of the youtube website and all we have to do here is remove the widht and height properties because those fixed values don't help us making things responsive.

We also wrap the iframe in a container div with a fluid-yt class. And then we can create this class in our css.

.fluid-yt {
    aspect-ratio: 16 / 9;
}

Here we create our fluid-yt class and give it an aspect-ratio of 16 / 9. Most videos will have that 16:9 ratio and this makes sure that our container adjusts it's height to fit.

Now we have to make our iframe follow the same size as our container.

.fluid-yt > iframe {
    width: 100%;
    height: 100%;
}

So we simply make the iframe take up 100% of the containers width and height, making it take up the same amount of space.

But if you are coding along you will notice that the video/iframe doesn't scale up. The default behavior of a div is to be as large as it can horizontally and be as small as it can vertically. In this case the height is leading and the div becomes just as high as the video and because of the 16 / 9 aspect ratio it has to shrink its width.

Lets fix that.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}

Here we force the container div to be 100% wide, and adjust it's height accordingly to adhere to the 16 / 9 rule.

We now have a fully responsive youtube video embed.

fixing the weird space.

While we are at it there is a small thing we have to fix to make things perfect. You might not see it right now, but there is actually a tiny bit of white space below our video. In most cases that wont matter, but if you need to align things this might trip you up.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: pink;
}

So lets give our container a pink background so we can see this.

I'm not totally sure what the technical reason for this is, but the problem is caused by the fact that the iframe is an inline element, and thus, just like text, it gets that bit of space at the bottom. (The same is true for images, if you ever encounter the problem there)

.fluid-yt > iframe {
    display: block;
    width: 100%;
    height: 100%;
}

So to fix this issue we just have to turn our iframe into a block element by giving it a display of block.

There, now its ready to be reused in any future projects.

fallback for older browsers

The browser support for all of this is pretty good, but if you must support legacy browsers there is a dirty fallback you can add to your css. I borrowed this snippet from this github repo by Jaydan Urwin.

@supports not (aspect-ratio: 16 / 9) {
  .fluid-yt { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
  }
  .fluid-yt > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
}

All done! You can also check out this codepen for a working example.

Subscribe to my Youtube channel
Buy me a coffee
Come chat on Twitter
And follow me here for more articles

Thanks for your precious time, and have an awesome day!

Comments

[Donkey Kong]

Can you do a bit more advanced one where nowadays we have YouTube livestreams with livechat? On a desktop, I'm looking have the 16 / 9 video on the left and chat on the right (75% video, 25% chat) whereas they both take up 100% of the width when screen width is smaller than 1024px.