Responsive Iframes with One Great CSS Trick

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.


You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.

Join Us

  • Chris Costa

    Would you be willing to help me with a site I’m struggling with the iframe code from a third party? Once I hear back from you I’ll send you access. Thank you!

  • Wunderbar! Thanks for your help. Works for our eLearning (Storyline) modules too. :)

  • Gregory Gan

    I am happy it helped!

  • Manu Smith

    Hi Gregory does the get hits counted in YouTube? cause it doesnt for me, also is there a way to display the youtube banner in that player?

    Is a pitty cause that shortcode in wordpress works really fine but for me it worked better the embeded solution with the iframe.

  • Manu Smith

    Hi
    Your first solution worked fine but then I found someone else that included all the css stuff in the same code, seems to work fine, is there any difference between posting it your way or all together inside the div elements?

  • Gregory Gan

    clarity and reusability, separating the CSS from the HTML is always a good idea :)

  • Dekya Samson

    this saved my life. Just saying.

    Thanks!

  • Alessandro Pocaterra

    Thank you!
    I felt like swapping my laptop for some sheep…
    Works great

  • Gregory Gan

    No problem! glad it helped

  • Gregory Gan

    You’re welcome :)

  • Khalid Lakhani

    Great, Thanks for savings lot of time
    thanks to bootstrap guys as well

  • KeviKum

    Bro No Words You Are Awesome Problem Solved & Earning Start
    Thanks From Heart!!!

  • ty

    Very helpful! Would you tell me how to show an iframe element being centered with the width of 60%? I tried but can’t do it.

  • R9

    This trick is called intrinsic padding :)

  • Kevin

    I’ve tried this while embedding a chart from Google Spreadsheets but the chart keeps the original 600px width that Google spits out. The wrapper makes the chart scrollable on mobile instead of making it less wide. Any thoughts on this?

  • Newbie Gamers

    Thx u so much for this trick

  • Miles Lowe

    How do you seperate the code to make it work. I tried the code above with my you tube embedded code and it worked great. Can you show the whole code together as that would help so much!

  • Timothy Hanley

    So helpful, thank you!

  • Timothy Hanley

    just dealt with the exact same issue, set the left: 20%. It stays centered on all the viewports. Hope that works, cheers!

  • DanOwen

    Fantastic! It also works inline in a WordPress text box. I tried it that way before adding it to the WP custom CSS.

    Thank you.

  • ty

    Hanley-san Thank you for the reply. It works!

  • Lucy Lakinzi Lakeshia

    I have iframe src = link

    CSS is as above

    But the it shows different size in pc/phone doesn’t fit according devices

  • Paul Suarez

    Thanks now my iframes look awesome.

  • Thank you so much!! I’ve spent the past few days trying to find a way to put my instagram onto my homepage and all I could find was some iframe thing, but I was getting frustrated until I found this page!!

  • Monsieur Propre

    It works well for horizontal content BUT I can’t do it for a vertical image :/
    If my image size is 1280x720px, the 56.25% ratio works fine, but if my image size is 720x1280px, what ratio should I use?
    Thank you for your help :)

  • Good Info. Like your post. Its totally helpful for me regarding embedding my videos in web pages.

  • This trick is amazing! I have removed all the Javascript fixes from my website and replace with this CSS method only. Thank you! Now my Youtube video looks way better!

  • Hey MP,

    Setting your padding to 177.778% should do the trick (16 / 9 = 1.7777).

  • wordsilk

    Many thanks for this – works perfectly!

  • vicki thornton

    OK I’m a total noob (do people still say that?) and this was a lifesaver for me. Thanks heaps Manu, I copied and pasted and modified with my own link (of course), into websitebuilder editor for my reviews from Massagebook and it works perfectly, now clients can see my reviews on their phones.

    thanks again
    Vicki

  • John P

    This works for me except when I rotate the iPhone and rotate back again, the video has slipped out of the iframe. I had the same issue with an embedded google calendar, which I solved through trial and error, but still don’t quite know why it’s working.

  • Saturn WebCafe

    Hey from saturnwebcafe.com !
    This is exactly what we needed while having issues with one of our pages.
    Thanks!

  • MP

    Thanks Rob Ross

    I tested it but it was not enough.
    I found why. Here is the right CSS code below :

    .resp-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 177,78%;
    }

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

    Hoping that it will help some of us 😉

    Cheers,
    MP

  • nice its working nice to much of you
    Thank you