Responsive Iframes — The Right Way (CSS Only)!

Building responsive iframes can be frustrating. Don’t let an iframe break your beautifully laid out responsive site. Learn how to build responsive iframes the right way with just a few lines of CSS.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.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%;
}
The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

How to make iframe responsive… easy!

Trying and failing to make and iframe responsive is like a wright of passage in the web development world. The problem is iframes set to 100% become fluid, not responsive making the height a fixed size. Load up on your headache meds, because tryingvercoming this without knowing this technique will cause ‘How to make iframe responsive’ is a common question with a simple CSS-only solution, the intrinsic ratio technique.

responsive iframes
Don’t get frustrated, make iframe responsive with the intrinsic ratio technique — cross browser compatible!

JavaScript is NOT a solution.

I cringe every-time I see someone using JavaScript to make an iframe responsive. Even if they’re “light-weight”, their not needed. Worse, often they have their own issues with cross-browser compatibility. There’s a much simpler, easier to implement and cross-browser compliant solution to make iframes responsive called the intrinsic ratio technique. Let’s dig deeper into the responsive iframe CSS to see how it works.

Intrinsic ratios for responsive iframes.

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. Rather, making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make an iframe responsive?

In Resize Videos Proportionally, we learned how to use the intrinsic ratio technique to make your embedded videos responsive. We’ll use that same method and apply it 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.

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.

Responsive iframe CSS

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. 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 a aspect ratio class to your iframe. If you don’t, it could cause the 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:

Breaking It Down

  • It’s key 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-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 sites 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,
);

Responsive iframes Using 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 &#x26; save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width &#x26; height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});

// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container&#x27;s width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();

Let’s Sum It Up!

Say Goodbye to embedded content breaking your layouts with the intrinic 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:

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

120 thoughts on “Responsive Iframes — The Right Way (CSS Only)!”

  1. i had the same problem. added the div and it disappeared.

    also tried the js code and it didn’t work. i’d love to get this to work.

    br

  2. I had to view source on your example to get it (the “Don’t forget to apply the styles above to your iframe!” note was what I needed but, not being a programmer, didn’t understand). Anyway, got it, brilliant tutorial, thanks so much!

    1. Miriam, I suspect I am experiencing the same translation challenge. Can you elaborate on what it is that you did to fix the issue?

    2. I still don’t get it.

      From the comment, “Don’t forget to apply the styles above to your iframe!”, I assume there’s something that needs to be done to the line, but I guess I’m even less of a coder than are you, as I don’t even know how to look at the source of his example. I right-clicked on the scrolling frame and selected “View page source”, but I think that’s showing the source for this entire page, not just the scrolling window/frame, and when I search in that source-code for “<iframe", I still don't see any modifications to the "<iframe src=…" line.

      So I still don't have a resized iframe. Me=sad….

      Other than that, this tutorial looks like exactly what I need, if I could just get it to work. Thanks for putting it out there; it may get me closer….

      1. After a weekend, still no success.

        And as I’ve thought about it, as great a work-around as this is, it is a work-around, around a broken-ness that should not exist in the first place.

        should work. If that broken-ness were fixed, we’d be done with it.

        I understand there’s probably a good reason for this behavior (something about iframes not being block-level elements, blah blah blah), but intuitively, height=”100%” should work.

        1. My example code got wiped out by the commenting system (with no warning, and apparently no way to edit my post to fix it – arg!). Without the code, my statement was essentially that using the width=”100%” format should work.

  3. In your generateRatios mixin, you swapped the width/height in the ratio() function. Should be: ratio($width, $height)

  4. Your CSS example worked well for me creating a responsive embed for slides.com, which doesn’t use its own responsive script loader (like speakerdeck.com). Thanks!

  5. Nice article!

    I inherrited some iframes that have image maps inside them. These are notoriously mobile unfriendly. I’m looking at some jquery which might solve the problem, but your solution for the iframes is brilliant.

    Thanks!

  6. Important: Don’t forget to apply the styles above to your iframe. If you don’t, it could cause the iframe to disappear.

    My iframe disappeared. I’m not sure what you mean by apply the styles to the iframe.

  7. This will not work for my site. I have tried every solution provided but to no avail. Can anyone help with this? I am using Bootstrap.

  8. Great tutorial!
    But the iframe only shows up when I change the height. When the height is 0, the iframe will not display. What can I do about it?

  9. Correction:
    I meant:

    To:
    div class=”intrinsic-container intrinsic-container-16×9″
    for 16×9 ratio

    or

    To:
    div class=”intrinsic-container intrinsic-container-4×3″
    for 4×3 ratio

    Cheers

  10. This is fine for videos but doesn’t work for embedded iframes that have styles embedded in the iframe like a width on the body tag.

  11. Hi, thanks for a simple solution, works perfect using Youtube film.
    I our case we are hosting the videos at external provider, and a typical ifram code would look like this:
    (messing up code a littlebit so it will be accepted)
    iframe src=”//rrr.sz.xlcdn.com/account=XXXX&file=EXAMPLE.mp4&type=streaming&service=wowza&output=player” frameborder=”0″ allowfullscreen – /iframe
    In this case it’s not responsive, could the poblem be the player or content in some way?

  12. I tried the code, see below but it did not work. What am I doing wrong?

    .intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden;
    }

    /* 16×9 Aspect Ratio */
    .intrinsic-container-16×9 {
    padding-bottom: 56.25%;
    }

    /* 4×3 Aspect Ratio */
    .intrinsic-container-4×3 {
    padding-bottom: 75%;
    }

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

    <ifram

  13. Possible Error??? You mentioned: “Don’t forget to apply a aspect ratio class to your iframe” I did that and it wouldn’t show up. Then I applied the aspect ratio class to the containing the iframe and it worked. Thanks for the info!

    1. What it means, put aspect ration inside the iframe
      .intrinsic-container iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      .ratio-16×9 {
      padding-bottom: 56.25%;
      }
      .ratio-4×3 {
      padding-bottom: 75%;
      }
      }

  14. This worked so nicely and it was so easy! I did have to adjust the height here:
    .intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden;
    }
    —-
    but used everything else, as is. Didn’t take long, didn’t bulk up my code. Thank you!

  15. Thank you for posting this. I’ve really struggled with iframes with YouTube videos and other instances with my clients’ websites. Just tested this out with a custom Google map on a new website, and it worked like a champ. This is going straight into my Evernote database!

  16. Has anyone had any luck in getting an iFrame to be responsive with a new CSS Grid element?

    I’ve tried all of the tricks mentioned above and I’m having zero success in getting an iFRAME to work within a CSS Grid element and be responsive.

    Regards,

  17. Thank you very much! The Javascript solution for removing width and height iframe attribute on WordPress is really useful!

  18. Hi Ben

    I am a rank amateur and I want to embed an iFrame which links to a URL. I cannot seem to get this to work for me

    Can you assist?

    John

  19. What if it’s not a YouTube video? What if we don’t know the size/aspect ratio of the content. What if the content is HTML. Then how do we do it?

  20. For those wondering what the extra step is, you have to add in the aspect ratio class. So in addition to div class=”intrinsic-container” you need

    div class=”intrinsic-container intrinsic-container-16×9″

    Hope that makes sense.

  21. @Paul Sorry, a bit noob to responsive coding, but . . . if I wanted an embedded Articulate module to show responsively in whatever viewport size the viewer has, do I have to duplicate the code you mention for both the 16×9 and for the 4×3 aspect ratios?

    Here is what i had based on the article before I read your comment today:

    . . . what would it look like to accomodate both/all aspect ratios?

  22. Hello, I got the code to work and it’s perfect, but I had to alter it. 56.25% produced a way too large window vertically, so I turned it down to 30% and it seems to match the video size.

    Can somebody reassure me that what I did is fine?

    1. Nevermind, turns out if you set a ‘max-width’ for .intrinsic-container it messes with the scaling of a video. What I did only solved my problems temporarily. Now 56.25% works perfect, sorry.

  23. Not sure how I got here except I was searching how to make an iframe responsive but I am not needing a video to be responsive, I need a Google Calendar to be responsive. I have been on website after website, trying different code after code with no results. I am getting very frustrated :-/ I am not a coder and I am doing this for free as a booster member at a high school. I tried the code above and yes, it also made the calendar disappear (as others mentioned) but I thought that might have been because I didn’t set Aspect Ratios, although I tried but not sure what I am supposed to put?? Here is my dilemma:

    iPhone:
    1. With the code I have in place currently, it cuts off part of the week and actually, I would like it to show the Agenda view on a phone that way it is easier to read. Is this possible?
    2. The calendar gradually “crawls” once you open the page it’s on? I have changed all kinds of css rules trying to fix/correct this problem with NO luck!
    3. You cannot click on an event on the calendar to view it? It opens and then closes right after, it’s not even on the screen for one second?

    iPad:
    The calendar ALSO “crawls”! And once it starts, you cannot open an event here either unless you do it right as the page opens, but once it starts crawling, you cannot..

    Desktop:
    The calendar is WAY too big even though I have set the size to width=”320″ height=”320″.

    Here is the code in my css file that I have applied (at least it doesn’t extend past the border of my page now on a mobile device)

    .responsiveCal { position: relative; padding-bottom: 100%; height: 0; overflow: hidden;
    }
    .responsiveCal iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%;
    }

    I need help! Any code you can give me to fix this problem would be greatly appreciate. Also, if you can tell me where to put the code that would be helpful cause as I said, I am not a coder.

    1. Hello dear unknown and far away user.

      I reply long after your post because I had the same problem as yours and I spent so long time to find a solution. You probably don’t have this problem anymore but maybe someone one day will need it.

      I got the solution on this website: https://en.forums.wordpress.com/topic/google-calendar-embed-not-displaying-correctly-on-mobile-iphone-5/

      The solution was to get rid of the title of your Google Calendar. For some reasons that I don’t understand, that is what provoked this problem.

  24. Thanks very much for the guide! Really helpful!
    Do you have any suggestions for making content in iframes responsive (or in any way behave) on Firefox?
    It’s the only browser that doesn’t seem to see the edges of the box/page layout the iframe is in.

  25. IMPORTANT: Don’t forget to apply a aspect ratio class to your iframe. If you don’t, it could cause the iframe to disappear.
    IS THIS DECLARATION IS GOOD, OR TRY SOMETHING DIFFERENT.
    .intrinsic-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 56.25vw;
    .ratio-16×9 {
    padding-bottom: 56.25%;
    }
    .ratio-4×3 {
    padding-bottom: 75%;
    }
    }

  26. I was Tom the cat blowing my top until i found your page. I used the intrinsic styles in my css and removed the width/height from the iframe code and —voila! — FINALLY my embedded vimeo looks great from desktop to phone – no more the gigantic white space above and below the video at any dislay width.

    THANK YOU!!!!!!

  27. Hello! I have been working on making an iframe video from youtube responsive on my boss’ website and I’m not really a trained programmer (did some C++ back in highschool but nothing in 5 years). I have tried this coding and read through some of the responses. There seems to be a common theme with the page having to be responsive as well. The website was created on WordPress with the Porcelain theme. Would the theme prevent its pages from being responsive? And where in the CSS file would I find said coding to make the page responsive as well. I have tried everything and I can’t seem to find the issue. I know I’m really close. 🙁

  28. Works great, but I am not using video and the content height is dynamic and I don’t want two scroll bars. I tried modifying the iframe as well as the container and it didn’t work. Could it be something inherent in the 3rd party content?

  29. Thanks for sharing this method. I had to reverse engineer the CSS into double nested divs as I don’t have the ability to easily CSS where I was editing at the moment. This technique still did the job.

    Thank you!

  30. Slightly OT: Do you clever people know how to embed slideshare or similar content and force it to fetch the desktop viewport version?

    Reason I’m asking is, I have trouble getting slideshare (specifically) to go full screen when embedding on a wordpress site as the fullscreen button only shows in desktop viewport. I think it’s on slideshare’s end. I’m trying to trick it to use the full real estate of mobile screens. It would be nice for my audience to view slides full screen as they hear a podcast lecture and I can’t understand why they can on the desktop and not on mobile.

  31. Great article.
    What if I want to use responsive embeds at the same time fill whatever space is available on the screen (height basically)?

    Thanks

  32. it works perfectly ! What should I do to make it work for content showed in a portrait mode? The code above works awesomely for landscape mode. I was trying to change it to make it work for portrait mode, like for mobile devices, but haven’t been able to. Any advise is much appreciated.

  33. excellent easy to follow article. Was the last thing i needed sorting before I could get my website up n running. Thanks

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

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

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

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

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

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

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

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

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.