Responsive iframes

Building responsive iframes can be frustrating. Don't let one break your beautifully laid out responsive site. Learn how to build responsive iframes the right way with just CSS using the intrinsic ratio technique to create an aspect ratio box.
Published
Updated
Typical Read
8 minutes
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.
Find your next web developer job
jobs by Indeed

Responsive iframes was originally published on Mar 19, 2014 and has recently been updated on Aug 6, 2020 to reflect emerging trends.

Learn to create responsive iframes with clean & simple CSS by making an aspect ratio box using intrinsic ratios. Transform any iframe to become responsive that’ll keep its aspect ratio when resized.

tl;dr

.iframe-container {
  overflow: hidden;
  // 16:9 aspect ratio
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

Articles like Responsive iframes delivered to your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Step-by-Step Guide to Responsive iframes

Building responsive iframes is a wright of passage in the web development world. The problem, iframes set to 100% become fluid, not responsive. The aspect ratio doesn’t stay the same since only the width scales. 

So how do you make an iframe responsive? It’s a common question with a simple CSS-only solution. Use the intrinsic ratio technique to create an aspect ratio box. Check out the example below.

How to make an iframe responsive?
  1. Step 1: Get the iframe embed code and paste into your document
  2. Step 2: Set the height & width attributes to 100% (optional, can be handled via CSS)
  3. Step 3: Absolute position the iframe within a container
  4. Step 4: Add padding-top to the container

Don’t forget to lazy-load your iframes. In addition to making your iframes responsive, you’ll want to lazy-load them using the loading attribute. This improves page load times, enhances the user experience, and increases your search engine rankings. Learn more about how to lazy-load iframes.

This example demonstrates how to embed a responsive (16:9) YouTube video using an iframe snippet. It creates an aspect ratio box that will resize proportionally based on screen size. Try it out by resizing your browser window.

Example Aspect Ratios

padding-top: 56.25%; /* 16:9 aspect ratio */
padding-top: 75%; /* 4:3 aspect ratio */
padding-top: 66.66%; /* 3:2 aspect ratio */
padding-top: 62.5%; /* 8:5 aspect ratio */
padding-top: 100%; /* 1:1 aspect ratio */

What’s an aspect ratio? An aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and for YouTube videos).

The Magic of Responsive iframes

The secret sauce to making iframes responsive is something called the intrinsic ratio technique (aka. an aspect ratio box).

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing (aka. responsive iframes) these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Yet making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make an iframe responsive? Hint: it doesn’t require any JavaScript, just a simple CSS technique!

Native responsive iframes are coming! There is the experimental intrinsicsize attribute that I could imagine being quite nice for iframes in addition to images. Plus the aspect-ratio in CSS which could default to use the width and height attributes on the element, which I hope would extend to iframes.

The Intrinsic Ratio Technique (aka. aspect ratio box)

Aspect ratio box to create responsive iframes
For the visual learner, here’s how creating responsive iframes work. We have set a default padding-top here, but in reality, the ratio of the sizing of an embed change per provider and even per embed. We need to calculate the padding-top and then add this as a style to the responsive wrapper.

In Resize Videos Proportionally, I went over how to use the intrinsic ratio technique to make your embedded videos responsive. We’ll use that same method to create an aspect ratio box to make any iframe, YouTube & Vimeo video or Google Map responsive. Only dependency is you know the aspect ratio (width x height) of the iframe.

Do not use JavaScript to make iframes responsive. I cringe every-time I see someone using JS when a simple CSS solution exists — even if it’s “light-weight”, it’s not needed. Worse, they often have issues with cross-browser compatibility & bugginess. The intrinsic ratio technique is a much simpler way to implement cross-browser compliant responsive iframes.

In-depth Guide to Making iframes Responsive

When embedding iframes for content such as videos, most services like YouTube and Vimeo will provide you a snippet of code like the one below:

<iframe width="560" height="315" src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>

Notice I removed the frameborder attribute. If you’re using HTML5, that attribute is no longer supported.

First of all, remove the width and height attributes. Keeping those attributes forces the content to stay at that size regardless of the screen size. This causes problems in responsive layouts when the screen size is smaller than the width of the iframe. Though we could use CSS to force the size, why have them if their not being used — less code is beautiful code.

<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>

Next, let’s add a container with a class around the iframe:

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

Now, we add a little touch of CSS magic to make the iframe responsive. The same way we did in the “Resize Videos Proportionally with Intrinsic Ratios“.

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

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

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

IMPORTANT: Don’t forget to apply an aspect ratio class to your iframe. If you don’t, it could cause them iframe to disappear.

That it! Simple, huh? Your iframe should now proportionally resize based on the browser size. Here’s a breakdown of how it works:

Highlights to Making iframes Responsive

  • It’s key to specify the containers position to be relative. This allows us to absolute position the iframe within it, which is needed to make it responsive.
  • The padding-top value is calculated based on the aspect ratio of your content. Instead of adding it to the intrinsic-container class, we added separate classes that can be appended to that element depending on the type of content you’re embedding. I prefer doing this so I’m not duplicating the container code for different aspect ratios. To find the aspect ratio of a container, use this formula: 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 does protrude outside of the container, it will be hidden and avoid screwing up the site’s layout.
  • Like with most absolute positioned elements, we need to set the top and left properties so the iframe get’s put in the right place.
  • Finally, width and height are set to 100% so the iframe takes up 100% of the containers’ space.

Using SASS?

If you’re using SASS, use this function to find the ratio or padding-bottom of the parent container:

/**
 * Ratios
 * Returns the ratio for specified dimensions.
 */
@function ratio($width, $height) {
  return percentage( $height / $width);
}

Taking that one step further, you can create a mixin to generate ratio classes:

@mixin generateRatios($width, $height, $prefix: "ratio-") {
  $class-name: $prefix + $width + "x" + $height;

  .#{$class-name} {
    padding-bottom: ratio($width, $height);
  }
  // Output example: .ratio-16x9 {}
}

@include generateRatios(16,9); // 16x9
@include generateRatios(4,3);  // 4x3

We can use this same technique to make other types of embedded content responsive like Google Maps & Calendars. Basically, anything that uses a iframe using only CSS! If you don’t have access to edit the site stylesheets directly, here’s a nifty tool that will generate responsive embed codes for you.

Using a CSS Framework?

A lot of projects now will use some kind of CSS framework like Bootstrap, Foundation or Materialize to help with keep styling uniform throughout the project. Some frameworks already have classes that will do exactly the same as what’s above. Check out some of the examples below.

Responsive iframes in Bootstrap

Bootstrap 3.2+, use the predefined class .embed-responsive and an aspect ratio class modifier like .embed-responsive-16by9 (more listed below). 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.

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

Other responsive iframe ratios in Bootstrap:

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

You can, of course, create your own modifier class:

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

Responsive iframes in 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="https://www.youtube.com/embed/K1K8s-tQGqY" frameborder="0" allowfullscreen></iframe>
</div>

Responsive iframes in Foundation

<div class="responsive-embed">
  <iframe src="https://www.youtube.com/embed/K1K8s-tQGqY" 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,
);

So you’re determined to use JS?

What if you don’t know the aspect ratio? Let’s say you have content authors creating interactives with each having different dimensions. Without knowing the aspect ratio of the iframe, it’s not easy to implement the intrinsic ratio technique.

You can overcome this problem by using JS:

// Find all iframes
var $iframes = $( "iframe" );

// Find & save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width & height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});

Responsive iframes are awesome.

Say Goodbye to embedded content breaking your layouts with the intrinsic ratio technique. We’ve walked through how just a little bit of code can easily make your iframes and other embedded content responsive friendly.

How do you embed third-party content on your responsive website? Do you have a nifty technique or trick to accomplish responsive embedded content? What about your workflow for embedding content like Google Maps, YouTube, etc? I’d love to hear from you. Comment below with your thoughts.

Additional Resources

Check out these other great articles about making embedded content responsive:

Did you find Responsive iframes useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.

149 Comments on “Responsive iframes”

Patrick

# Nov 30, 2018

Any Suggestions when dealing with the aspect ratio of the iframe changing based on the width of the content?

David

# Nov 9, 2018

Hi Ben,

First and foremost, thank you very much for being so helpful, it is appreciated. I have a question about (code and where I should place the code) how to remove the black border that is on the top and bottom of my video when viewing the video on tablet or mobile devices?

Thanks again.

David

Davvu

# Oct 29, 2018

Works beautifully using that padding-top. Shame it can’t change the scroll height of the main window, the parent of the iframe element.

Ian

# Oct 25, 2018

THANK YOU! For those searching for Google Map embeds, this is absolutely perfect. Come to Nashville, I owe you a beer.

Rafael Ribeiro

# Oct 9, 2018

It works, but my video got huge.
How can I change the scale without losing the centralization of the iframe?
I tried max-height/width, but then my video went to the left.

Ihsaan Muhammad

# Oct 2, 2018

Man, this trick was amazingly helpful on an iframe problem I had with a landing page I finished building today. One thing I would add that I got from an article that linked to this article is

-webkit-overflow-scrolling: touch;

That one line of code, combined with the other guidance here completely solved my problem. I now have a responsive iFrame with embedded content that’s scrollable on mobile devices.

# Sep 30, 2018

Great article

# Sep 24, 2018

thanks for helping me fix a wordpress.com fixed width embed tag

# Sep 22, 2018

LOVE THIS! THANK YOU!

# Sep 20, 2018

I know little but i’ve included all the code you have here, including the relative and absolute perameters. I believe my issues with the layout are caused by the absolute position of top and left properties set to 0.

How can i get it to render within the div container i’ve already got set up? I have it within a div grid with delineated rows and columns that have other content operating responsively, rendering side-by-side or stacked depending on browser width. The column containing the iframe now is set to 100% of the max width of the div grid as I want it to be its own element in the page.

Am I missing something obvious?

# Sep 20, 2018

Not sure, would need to see your code.

Morne

# Dec 20, 2019

Thank you for this… Just struggled with full screen issues and this article really aided me.

# Sep 19, 2018

Hello

When i use your code to make a youtube video responsive within its iframe it makes it take up the whole screen due to the 100% height and width values. When i shrink the values it’s still pinned to the top left of the page. I have the container for the iframe within a div grid for the page layout.

Is there any tips or tricks to get this to work within a div grid?

Thanks for your website – its a great resource!

Best
Josh

# Sep 19, 2018

Sounds like you’re missing something. Double check your code and make sure the container you have around your iframe has it’s position set to relative.

# Aug 23, 2018

Thanks Ben, your jQuery iframe solution works like a charm, my iframes were all different sizes,

# Aug 21, 2018

Thanks! This works great.

# Aug 21, 2018

What if I want a bit more space around the iframe (left and right sides) – if I change the height and width to 90% will that break anything else. Also, once I do that, is there a way to then center the iframe on the page (left to right)? Thanks!

# Aug 21, 2018

You can set the width to whatever you’d like, just update the padding-top to keep your aspect ratio. For centering, you can use margin.

.iframe {
  margin: 0 auto;
}
Eric Faucett

# Aug 16, 2018

Thank you for this awesome article! I was super frustrated because I had a Facebook Embedded video that WOULD NOT load responsive on mobile!

This is extremely valuable, worked like a CYNCH and I’m grateful!! Super easy to implement and expert advice ALL AROUND!!!

# Aug 16, 2018

Glad you found it useful Eric!

Tony

# Aug 9, 2018

What about if the iframe contains dynamic content that changes height when a button is clicked inside the frame? It seems like ever site on the subject just recycles the same code. It all only works for content with fixed a fix height/width.

# Aug 8, 2018

Nice post

Lloyd

# Jul 24, 2018

Ben.… YOU ARE BRILLANT!
Followed your plain-jane simple instructions, and SOLVED in under 2 minutes.
I am no longer a victim to the mighty IFRAME!!! 😛
Thank you!!!

# Jul 17, 2018

Great for media that requires an aspect ratio. But, how can we adapt this to static content such as forms and pages?

# Jul 7, 2018

Hello, I found this by accident but I was wondering.
I agree with: “remove the I-frame height and width”, sort of, I just made the width “AUTO” and it seemed to solve everything?
Now, OK, I am not a developers you know what, so why is this not an option?
Cheers

Leave a Reply

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

All comments posted on 'Responsive iframes' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.