Responsive YouTube Embed

One frustrating thing I’ve run in to multiple times is the difficulty in working with YouTube embed codes when it comes to responsive design. Typically you can make an image, or video, responsive by simply assigning a 100% width with a variable height, but that doesn’t work with YouTube embeds. If you use this tactic you will get the variable 100% width, but the iframe defaults to 150px high. Needless to say, that won’t work. So, lets checkout a technique that will give you a responsive YouTube video embed in your website with just some CSS & HTML.

Upon doing some research I found this great technique (originally found here) to make your YouTube embedded videos responsive.

The CSS

First, you’ll want to add this snippet to your stylesheet:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The HTML

Then, simply wrap your iframe in a div with the class of “video container” like so:

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/your-video-id-here" frameborder="0" width="560" height="315"></iframe>
</div>

How does this create a Responsive YouTube video?

We have a few things that make things that make this work:

1. We have a div with a relative position, no height and a bottom padding of 56.25%. Why 56.25% you ask? That is the aspect ratio of the video. Notice the video has dimensions of 560px by 315px. What is 315 / 560? Yep, 0.5625 (or 56.25%). If you have a video of different dimensions simply divide the height over the width and you’ll get the bottom padding needed for the video container div.
2. Next we have the iframe, which is absolutely positioned inside the video container with a width and height of 100%. This will ensure the video stays within the video container, but fills it both horizontally and vertically at all times.
3. Since the height of our video container div is always 100% of it’s parent container and 56.25% in height, it will always maintain the correct aspect ratio, regardless of screen size. Pretty cool, huh?

The only downside to this method is that it does require a container div around the iframe, which isn’t exactly ideal. But it is a very simple method for making your YouTube Video Embed’s responsive.