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.
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.
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.
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.
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
.square to have a
100%, a height of
0 and set the
top padding to
If you want to…
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).
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.
I am a professional web developer in Ontario, Canada. Learn Web Development for Free.