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.

Get New Posts in Your Inbox

This field is for validation purposes and should be left unchanged.

About Matt Whiteley

Matt has been building bespoke WordPress websites for over 10 years specializing in the Genesis Framework. He integrates Advanced Custom Fields heavily in all builds, especially with the new Gutenberg Block Editor, allowing clients to easily modify all aspects of the their website with ease.

He works with a wide variety of small businesses and agencies across the country providing development services as well as hosting and maintenance. When he isn't coding he enjoys spending time with his wife and two children, golfing and playing poker.

Reader Interactions


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


Leave a Reply

Your email address will not be published.