Nowadays, more and more people use their phones to navigate the web. It is therefore even more important now for websites to be responsive. Most websites use YouTube videos, Google maps or other external website elements embedded in them. These functions are most commonly incorporated in a web page using the html iframe element and is one of the trickiest thing to make responsive.

I have struggled for a long time to get my YouTube videos to keep their ratio on different screen sizes. When testing my website on a smartphone, I would spend hours trying to figure out why my videos did not do what I expected… Until I finally discovered a great CSS trick that I can apply to all my iframes. Play with the size of the screen to see the responsive iframe at work. I can’t wait to share this trick with you in the following article.

Responsive Iframes

For the purpose of demonstration, this article will use a YouTube embed for our iframe. First, go on YouTube, click on ‘share’ under the video and then ‘embed’. You should now have the following code to copy into your html.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  gesture="media"
  allow="encrypted-media"
  allowfullscreen
></iframe>

Next, we need to remove width=“560” height=“315” because these are here to set the size of the iframe. Since we are going to be setting the size ourselves, this is unnecessary for our purposes.

Using CSS

Afterwards, we need to wrap the iframe in another html element like a <div>, this is very important as this element will be sizing your iframe. Then add a CSS class to your new wrapping element and one class to your iframe as seen below.

<div class="resp-container">
  <iframe
    class="resp-iframe"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    gesture="media"
    allow="encrypted-media"
    allowfullscreen
  ></iframe>
</div>

Define your wrapper class with the following style:

.resp-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

position: relative The position of both the wrapper and the iframe is very important here. We are setting it to a position: relative so that we can later position our iframe in relation to the wrapping element. This is because in CSS, position: absolute positions the element based on the closest non static parent element.
overflow: hidden is there to hide any elements that might be placed outside of the container.
padding-top: 56.25% This is where the magic is. In CSS, the padding-top property can receive a percentage, this is what keeps our iframe to the right ratio. By using percentage, it will calculate the padding to use based on the width of the element. In our example, we want to keep the ratio of 56.26% (height 9 ÷ width 16) because this is the default ratio for YouTube videos. However, other ratios can be used as well.

Define your iframe class as follows:

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

position: absolute; This will give the iframe a position relative to the wrapper and let it be positioned over the padding of the wrapper.
top: 0 and left: 0 are used to position the iframe at the center of the container.
width: 100% and height: 100% make the iframe take all of the wrapper’s space.

Demo

Once you are done, you should get an iframe that is responsive. Here I have a <video> instead because of some blog restrictions. But it works exactly the same way. You can play around with your browser size and see how responsive your iframes would be!

Using CSS Frameworks

Most projects will use some kind of CSS framework to help with keeping the styling uniform throughout the project, may it be Bootstrap or Material-UI. Some of these frameworks already have predefined classes that will do exactly the same as what is in the above trick but unfortunately not all. In each case you need to create a wrapping element and give it a certain class.

Using Bootstrap

In Bootstrap 3.2 and over, use the predefined class .embed-responsive and an aspect ratio class modifier like .embed-responsive-16by9. There are other ones listed below. Similarly to the trick above, this aspect ratio modifier will add the padding-top with different percentages depending on the given modifier class. Then give your iframe the .embed-responsive-item class. Here is an example:

<div class="embed-responsive embed-responsive-16by9">
  <iframe
    class="embed-responsive-item"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    allowfullscreen
  ></iframe>
</div>

The different aspect ratios that can be used are:

.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1

You can of course create your own modifier class. For example:

.embed-responsive-10by3 {
  padding-top: 30%;
}

Using Materialize

If you are using Materialize CSS, then you don’t need your own classes either. Just add the video-container class to your wrapper:

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Using Foundation

<div class="responsive-embed">
  <iframe
    src="https://www.youtube.com/embed/mM5_T-F1Yn4"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Aspect ratio modifier classes are set in your $responsive-embed-ratios map in your Foundation settings file:

$responsive-embed-ratios: (
  default: 16 by 9,
  vertical: 9 by 16,
  panorama: 256 by 81,
  square: 1 by 1,
);

Responsive Images

Images are a lot easier to deal with. With only a little CSS, you can have images keep their original aspect ratio whatever the size of the screen.

Using width

If you do not set the width to a fixed amount, but instead you fix it to 100% with a height: auto as so:

img {
  width: 100%;
  height: auto;
}

Then your images will be responsive and keep their ratio. However, using width means your images can scale to larger than their original size though and you could end up with a blurry image.

Using max-width

If you don’t want your images to be larger than the original size, then use max-width: 100% instead:

img {
  max-width: 100%;
  height: auto;
}

In the end, you will get responsive images, just like this one:

responsive-cssIsAwesome

Summing it all up

In conclusion, in this article we have seen the CSS trick that can make your iframes responsive. We have also seen multiple popular frameworks that provide predefined classes that will do it for you. As you saw, it’s actually pretty easy and I hope I saved you hours of trying to fit your iframes on your mobile. Lastly, you saw how easy it is to fit your images in your responsive website.

Let me know below in the comments what you think of the article and if you have any questions about anything above.

Responsive Iframes with One Great CSS Trick