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.


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%;


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

<div class="video-container">
    <iframe src="" frameborder="0" width="560" height="315"></iframe>

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.


  1. Anabel says:

    How do I make the video container stretch across the entire width of the screen?

    1. Matt Whiteley says:

      Hey Anabel,

      This code will make the video span the entire width of the “Video Container” div. Making it stretch the entire width of the screen would depend on site you’re putting it on as every site is coded differently.

      If you have a link to an example of where you’d like it to stretch the full width of the page I’d be happy to take a look.


  2. Alexander says:

    thank you for this solution.
    Works like a charm.

    1. Matt Whiteley says:

      Great! Glad I could help.

  3. Ronald says:

    Thanks It help me a lot, even on wordpress

  4. Mike says:

    I am going to try asap. Thanks.

  5. Mike says:

    Its Mike again… This works! Thanks again

  6. Paul Cantwell says:

    Excellent. Simple cut and paste and is a go.

  7. Ruth says:

    Thank you so much, it worked beautifully!

  8. Frank says:

    Thanks, good and simple solution.

  9. Peter says:

    Useful article Matt. It worked so well that I decided to make a tool that generates the responsive code with just a click.

    Here’s the page:

  10. Rachael says:

    I was looking everywhere for a solution to this, and everything else I tried didn’t work – but this worked perfectly! Thank you for sharing this 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *