Responsive iframes

Written by
Published
Updated
Typical Read
12 minutes
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

Don't let an iframe ugly-up your beautiful site. Avoid nasty iframe content gaps with a responsive iframe. Learn how with an aspect ratio box that'll adjust its height based on width — great for embedded videos.

tl;dr

Use the responsive iframe generator to quickly create a responsive iframe at any aspect ratio. Check out the code below to see how you can easily create them with just CSS using aspect ratio boxes.

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

Or you can use custom properties:

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}
<div style="--aspect-ratio:815/419;">
</div>

<div style="--aspect-ratio:16/9;">
</div>

<!-- even single value -->
<div style="--aspect-ratio:1.4;">
</div>

Guide to Responsive iframes

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing these pesky little windows to another world can be frustrating. It’s easy enough to make it span 100% of its container, but there’s no attribute (yet) to make the height resize accordingly.

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!

First, let’s define what a “responsive iframes” actually means.

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.

What is a responsive iframe?

The term “responsive iframe” is a little broad. For instance, styling an iframe to use 100%, 100vw or 100vh is technically making it responsive. But what if you need to adjust its height based on the width so it keeps its aspect ratio? That’s where the problem is, iframes are fluid and can’t natively adapt.

The old way of building responsive iframes usually took the form of some nasty JavaScript hack. A better, modern way uses a simple CSS technique — intrinsic ratios — to create an aspect ratio box.

What is an 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.

An aspect ratio is basically a container that adjusts its height based on its width to always keep its aspect ratio (i.e. 16×9, 4×3, 1×1, etc.). They’re most commonly used to embed iframe videos like YouTube or Vimeo videos.

This isn’t particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz’s Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave’s Ol’ Padded Box.

What is an intrinsic ratio?

An intrinsic ratio means an element will maintain its aspect ratio when resized. Think of an img with max-width: 100%. Change the width of its parent and it’ll change the size while keeping the same shape (aka. its aspect ratio).

How to calculate aspect ratios?

Perfect squares and 16:9 stuff is great, but the values used for those are just simple math. An aspect ratio can be anything, and they commonly are completely arbitrary. A video or image can be cropped to any size.

So how do you figure out the padding-top for say an image that’s 1127.34×591.44? One way is using the CSS calc(), like this:

padding-top: calc(591.44 / 1127.34 * 100%);

If you’re using a preprocessor like Sass, we could do the calculation ahead of time:

padding-top: 591.44px / 1127.34px * 100%;

How to create a responsive iframe?

It’s a cinch to make iframes responsive with an aspect ratio box using the intrinsic ratio technique. Or use the responsive iframe generator.

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.

The 3 steps to create a responsive iframe that keeps its aspect ratio:

  1. Create the aspect ratio box.

    Add a container for the iframe, determine the aspect ratio percentage, hide the overflow, and set its position to relative.

  2. Position the iframe.

    Set the width and height to 100% and absolutely position it to the top left.

  3. Optimize & style as needed.

    Add some CSS to remove the iframe border, lazyload it, and remove unneeded attributes.

Create the aspect ratio box.

.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
<div class="iframe-container"></div>

Position the iframe.

.iframe-container iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
}
<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/mB1dE0FotdY" width="100%" frameborder="0" title="Responsive iframe example" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</div>

Optimize & style as needed.

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/mB1dE0FotdY" loading="lazy" title="Responsive iframe example" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</div>

Try resizing your browser window to see the responsive iframe in action.

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.

List of ratios for responsive iframes.

Here’s a list of other aspect ratio percentages you can use when defining padding-top.

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

Responsive iframes with Sass

Sass makes it even easier to create responsive iframes. You can create a ratio function that’ll calculate the padding percentage needed for a particular aspect ratio, then a mixin to generate the styles.

The responsive iframe Sass mixin.

Use this Sass mixin to create an aspect ratio box for your iframes.

/// Aspect ratio box.
///
/// @author Ben Marshall
/// @link https://www.benmarshall.me/responsive-iframes
///
/// @param {int} $width - Width in pixels.
/// @param {int} $height - Height in pixels.
///
/// @example scss - Aspect ratio box mixin
///   .iframe-container {
///     @include aspectRatioBox(834, 469);
///   }
///
/// @output CSS aspect ratio box.
///   .iframe-container {
///     overflow: hidden;
///     padding-top: 56.25%;
///     position: relative;
///     top: 0;
///     width: 100%;
///   }
///
///   .iframe-container iframe {
///     border: 0;
///     height: 100%;
///     left: 0;
///     position: absolute;
///     top: 0;
///     width: 100%;
///   }
@mixin aspectRatioBox($width, $height) {
  overflow: hidden;
  padding-top: percentage($height / $width);
  position: relative;

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

The ratio Sass function.

Here’s a handy Sass function to calculate aspect ratio percentages:

/// Calculate a ratio.
///
/// @author Ben Marshall
/// @link https://www.benmarshall.me/responsive-iframes
///
/// @param {int} $width - Width in pixels.
/// @param {int} $height - Height in pixels.
/// @return {int} The calculated ratio percent.
///
/// @example scss - Ratio function
///   ratio(834, 469)
///   // 56.25
@function ratio($width, $height) {
  return percentage($height / $width);
}

CSS Framework Support

Many CSS frameworks like Bootstrap, Foundation, or Materialize have built-in styles for aspect ratio boxes. All use the same technique. Check out some of the examples below.

Responsive iframes in Bootstrap

Bootstrap 3.2+, uses the predefined class .embed-responsive, an aspect ratio class like .embed-responsive-16by9, and the .embed-responsive-item for the iframe. Check out the examples below or view their Embeds documentation.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Within Bootstrap’s _variables.scss, you can change the aspect ratios. Here’s an example of the $embed-responsive-aspect-ratios list:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;

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,
);

Responsive iframes in Semantic UI

Semantic UI provides an embed module that allows you to create aspect ratio boxes for videos, iframes, and more. See their Embed documentation for more information.

$('.url.example .ui.embed').embed();
<div class="ui embed" data-url="https://www.youtube.com/embed/O6Xo21L0ybE" data-placeholder="/images/bear-waving.jpg"></div>

Responsive iframes in Bulma

In Bulma, you can apply a specific ratio on any element by applying the has-ratio modifier to a resizable element. Check out the example below or see their Arbitrary ratios with any element documentation.

For example, you can apply a 16by9 ratio on an iframe.

<figure class="image is-16by9">
  <iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4?showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>

Here’s a list of all the available Bulma aspect ration classes:

  • is-square or is-1by1 – 1×1
  • is-5by4 – 5×4
  • is-4by3 – 4×3
  • is-3by2 – 3×2
  • is-5by3 – 5×3
  • is-16by9 – 16×9
  • is-2by1 – 2×1
  • is-3by1 – 3×1
  • is-4by5 – 4×5
  • is-3by4 – 3×4
  • is-2by3 – 2×3
  • is-3by5 – 3×5
  • is-9by16 – 9×16
  • is-1by2 – 1×2
  • is-1by3 – 1×3

What if the aspect ratio is dynamic?

This is the only time JavaScript should be used. 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. There’s a number of JS libraries out there (Pym.js or this jQuery plugin), or you can use this little code snippet.

function resizeAspectRatioBoxes() {
  var
    $this = $(this),
    proportion = $this.data('proportion'),
    w = $this.attr('width'),
    actual_w = $this.width();

  if (!proportion) {
    proportion = $this.attr('height') / w;
    $this.data('proportion', proportion);
  }

  if (actual_w != w) {
    $this.css('height', Math.round(actual_w * proportion) + 'px');
  }
}

$(window).resize(function() {
  resizeAspectRatioBoxes();
}):

Responsive iframes are awesome.

Say Goodbye to embedded content breaking your layouts with aspect ratio boxes using the intrinsic ratio technique. No longer do you have to deal with those annoying gaps iframe containers make as content width changes. Just keep in mind these tips when building aspect ratio boxes:

Things to remember.

  • First, the content within the iframe must be responsive. If not, it defeats the purpose of creating an aspect ratio box.
  • Don’t forget to specify the containers position to be relative. This allows the absolute positioning of the iframe within it.
  • The padding-top value is calculated based on the aspect ratio of your content. You can calculate this value using: (height / width) * 100 = aspect ratio precent.
  • 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 aspect ratio boxes is great for all kinds of content, not just iframes. We can use this same technique to make other types of embedded content responsive like Google Maps, calendars, Vimeo, and YouTube videos. Basically, anything that needs to keep its aspect ratio as the screen size changes. How are you using them on your site? Comment below.

FAQ

What is a responsive iframe?

A responsive iframe is a iframe that “responds” to its container. For instance, 100% width, 100vw, or 100vh.

What is an aspect ratio box?

It’s a container that adjusts its height based on its width to always keep its aspect ratio (i.e. 16×9, 4×3, 1×1, etc.).

How do you calculate an aspect ratio?

It’s simple: (height / width) * 100.

What is an intrinsic ratio?

Intrinsic ratios maintains an element aspect ratio when resized. Think of an img with max-width: 100%. Change the width of its parent and it’ll change the size while keeping the same shape (aka. its aspect ratio).

Do you have a question about aspect ratio boxes, the intrinsic ratio technique or how to make iframes responsive? Or maybe you have another nifty technique. I wanna hear from you. Post your questions, comments, or suggestions in the comments below.

More about iframes & aspect ratio boxes.

With the numerous screen sizes, there’s a host of things to consider to ensure your site looks good no matter the device. Not only is it important to consider the responsiveness of elements, but the performance too. Check out these other articles on iframes, responsive performance, and techniques to keep things sized right.

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.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

152 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

Join the conversation.

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.

Need help? Try the responsive iframe generator.

Generate HTML & CSS for responsive iframes using any aspect ratio. Enter the URL to the iframe, select an aspect ratio, then copy and paste the code!