DavidSpot Blog

Developer, super curious, a dog lover, sports fan and techie guy


Responsive iframe Tutorial with css

Here is a tutorial on how to make an iframe responsive in quick and simple way by using css.

I will use this youtube iframe link to exemplify

<iframe width="560" height="315" src="https://www.youtube.com/embed/qI_g07C_Q5I" frameborder="0" allowfullscreen></iframe>

 

  • Remove the width and height attributes, if you keep this attributes it will force the content to stay at that size regardless of the screen size and you will have to use javascript (one way is to use window.postMessage) to establish communication between iframe and the parent page to resize the iframe. I also removed the frameborder attribute because it's no longer supported in HTML5.
<iframe src="https://www.youtube.com/embed/qI_g07C_Q5I" allowfullscreen></iframe>

 

  • Add a container with a class around the iframe (a div it's a good example)
<div class="container">
  <iframe src="https://www.youtube.com/embed/qI_g07C_Q5I" allowfullscreen></iframe>
</div>

 

  • Add CSS to make the magic happen
.container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.container-16x9 {
  padding-bottom: 56.25%;
}

.container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

  • And... it's done :)

Now, how this all works?

The key is to specify the container’s position to be relative. This allows us to absolutely position the iframe within it, which is needed to make it responsive.


The padding-bottom value is calculated based on the aspect ratio of your content. Instead of adding it to the container class, I added a separate classes that can be appended to that element depending on the type of content you’re embedding. I prefer doing this in this way so I’m not duplicating the container code for different aspect ratios. I used this formula to find the aspect ratio of a container: height ÷ width = aspect ratio

Height is set to 0 because padding-bottom gives the iframe it’s height.


Using overflow hidden is important because it ensures if any content goes outside of the container, it will be hidden and avoids screwing up the layout and like with most absolute positioned elements, we need to set the top and left properties so the iframe to put it in the right place. Finnaly I set the width and height to 100% so the iframe takes up all the containers space.

Here you can find a working example.