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. …

We’re not going to use the border property, but the end result will be a responsive image with a flexible gradient “border” around it. Let’s get started.

Step 1: Create a container that is always square at every screen size

To make the border responsive and flexible it needs to fit the width of its container while holding its shape. Let’s add our gradient border using <figure> because we’re going to put the border around an image. I think <figure> is more semantic than a <div> but feel free to use that instead.

<figure class="gradient">

I’ve added the class .gradient because this element is going to become the gradient border around our…

Make a perfect square with CSS that fluidly adjusts to the width of its container. Thanks Dave Rupert for this trick.

Step 1: Add an empty DIV tag

There’s only one line of HTML for this project. It’s an empty DIV tag.


Now, let’s add a class that we can target. The class you use is only limited by your imagination! However, I recommend using something simple and descriptive like class=”square”.

<div class="square"></div>

Step 2: Style the DIV so its height is equal to its width

Style the .square to have a width of 100%, a height of 0 and set the top padding to 100%.

.square {
width: 100%;
height: 0;
padding-top: 100%;

If you want to…

CodePen, CSS-Tricks, and The Shop Talk Show

If you’re serious about becoming a web developer or about improving your web development skills. I can’t recommend these three resources enough. This article also serves as an “ode” to Chris Coyier (the man who is heavily involved in creating and maintaining all three).

Resource 1: CodePen

CodePen is a sandbox environment co-founded by The Great Chris Coyier and his super-team of developers and designers. A sandbox environment is a place where you can practice coding without worrying about messing up or breaking anything. CodePen actually has a lot of features and uses, but making consequence-free mistakes is my personal favorite among them.

Tyler Duprey

I am a professional web developer in Ontario, Canada. Learn Web Development for Free.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store