A Perfect Video Container with CSS

A step-by-step guide to a fluid-width 16:9 aspect ratio container for video iFrames using HTML and CSS. Thanks Dave Rupert for this trick.

A screenshot from my video tutorial here: https://www.youtube.com/watch?v=vrx4DHhr36A

Step 1: Remove any height or width inline-styles on your iframe of choice.

For this project we’ll need an iframe from any video sharing site of our choice. I’m going to chose an iframe for a video tutorial I published to YouTube. It’s also the video version of this tutorial. You can use it too. Just visit this link: https://www.youtube.com/watch?v=vrx4DHhr36A and then click share > embed > copy. I also removed the player controls by unchecking the box but you don’t have to do that. When you paste it into your html it will look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/vrx4DHhr36A?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You’ll notice this iFrame from youtube includes a fixed width and height in its inline style attributes. We don’t want a fixed width and height for our project so lets remove those. Here’s what it should look like now:

<iframe src="https://www.youtube.com/embed/vrx4DHhr36A?controls=0" frameborder="0" allow="accelerometer; autoplay…