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 are possible! Using the intrinsic ratio technique, transform any fixed or fluid iframe into a responsive one.

# How to make iframes 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, handled via CSS)
  3. Step 3: Absolute position the iframe within a container
  4. Step 4: Add padding-bottom to the container
.iframe-container {
  overflow: hidden;
  // Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625)
  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>

The example above shows how to embed a responsive YouTube video iframe.


# Responsive iframes — without a hack.

Trying and failing to make and 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. How to make iframe responsive? is a common question with a simple CSS-only solution, the intrinsic ratio technique (shown above).

# 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, I went over 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.

# Do not use JavaScript for responsive iframes.

I cringe every-time I see someone using JavaScript to make an iframe responsive. Even if it’s “light-weight” — not needed. Worse, often they have their own issues with cross-browser compatibility. The intrinsic ratio technique is a much simpler way to implement cross-browser compliant responsive iframes.

# Responsive iframe solution.

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

Some important take-aways when making iframes responsive.

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

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:

Comments

  1. This just saved me half a day of work (probably) 😉 Thank you.

  2. Kantor Andras August 8, 2019

    Thank you very much.

  3. E. Dodge July 2, 2019

    Thank you so much! This is a great resource. I really appreciate you sharing this.

  4. ideaWeb Madrid June 28, 2019

    amazing! thanks for all these alternatives !!! I did not know some of them.
    I have some doubts but I think I can solve them for myself, thank you very much for sharing them with us!

  5. Those Bootstrap classes just saved my life! Thanks 🙂

  6. It worked perfect. Thank you so much.

  7. Worked to perfection! Thank you so much!!

  8. Paige Donohoe April 8, 2019

    Hi there, I’m using CSS and when I do this it creates a window around my iframe with a scroll bar. When I make the browser window smaller, it makes the iframe’s window smaller too but the actual iframe (a graph) stays the same size, so you end up seeing only a fraction of the graph. Is there a way to fix this? Thanks!

    • Sounds like the content within the iframe isn’t responsive. The iframe itself is working correctly, but the content also needs to be responsive to change as the iframe changes.

  9. Dust Chen March 16, 2019

    you’re genius!! thanks a lot!

  10. TOP!! thank you

  11. For those searching for Google Map embeds, this is absolutely perfect. Works beautifully.

    THANK YOU!

  12. Hi, I have an issue with this website https://openrainbowvoice.com/ if I embbed it in my website, it’s content didn’t render correctly, i.e the content stretch for infinite height. I’m struggling with this issue on IOS (Safari & chrome)

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

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

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

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

  17. Rafael Ribeiro October 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.

  18. Ihsaan Muhammad October 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.

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

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

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

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

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

  23. Thanks! This works great.

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

    • 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;
      }
  25. Eric Faucett August 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!!!

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

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

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

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

  30. SwitchPirates June 28, 2018

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

  31. I did the same as in the tutorial, why the last two videos are not displayed properly (cropped the text).
    Codepen: https://codepen.io/mary_pieroszkiewicz/pen/BVpGge

    • It’s because those videos have different aspect ratios. You’ll need to adjust the padding to compensate for the different ratios.

  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. Bilal Haidar June 7, 2018

    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

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

  35. adam4adan May 3, 2018

    Good way of describing, and nice article to obtain information about
    my presentation subject matter, which i am going to present in school.

  36. its provide me an easy way. you have done a good work………

  37. Awesome technique! Exactly what I was looking for, thanks.

  38. Amazing work… Keep spread good knowledge

  39. Good Work. any other easy way such as auto i frame generated?? can we do this jobs with any free tool?

  40. very informative and clearly defined by you. Thank you

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

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

  43. Thanks so glad that I found this – it works great!

  44. Susanne Tamir March 7, 2018

    You saved my day Works brilliant ! Thanks a lot for sharing. Susanne

  45. It works perfectly, thanks!

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

  47. This just changed my life. Thank you!

  48. Thanks Ben! Still helping people out years later.

  49. Cheers mate this is amazing!

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

  51. 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%;
    }
    }

  52. Alice Leigh December 22, 2017

    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.

  53. Hello,

    I have an embedded design-builder that I would like to be responsive. The service we use doesn’t have a mobile-friendly version. I *think* the iframe is responsive now that I used the code you provided BUT the contents arent… Is there a solution to this? http://www.arscreening.com/ar-t-builder

    Thanks in advance!

    • Not on your end, the content within the iframe needs to be responsive as well. Unless you can make the other site that you’re linking too, there’s no solution.

  54. thanks…this was super helpful!

  55. Brilliant!! Thank you for creating this tutorial. This is extremely helpful and exactly what I was looking for!

  56. Thanks, Man It really worked!

  57. Yuri Werneck November 24, 2017

    Thanks Ben!!
    Bless U!!

  58. Complete AWESOMENESS!!! Thank you!!

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

  60. Great stuff, was struggling quite a bit with responsiveness, this really helped!

    Thanks!

    Josh

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

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

  62. Many, many thanks. I’ve been struggling with this for awhile.
    Best wishes. Jeff

  63. @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?

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

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

  66. John Murray June 3, 2017

    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

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

  68. Hey Ben, thanks for writing this up.

    I know it’s three years late, but here’s my take on a JS implementation: https://gist.github.com/rocktronica/e6ef063c3684f433f782f8cc19b961db

    It’s the same as your intrinsically sized wrapper technique and so doesn’t need to bind to window resize events.

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

  70. Thomas Petty April 27, 2017

    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!

  71. Thank you so much! I was struggling with this crap for months…
    The CSS solution works perfectly on big screen, ipad and iphone. God bless you and your family! 😀

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

  73. This is what i need. Thank you..

  74. Great solution. The sass ration function requires an ‘@’ in front of the return statement

  75. Richard Lincoln April 4, 2017

    Amazing! The code generator just made my life about 1000% easier! Thank you so much!

  76. Great, thanks! Works like a charm.

  77. Bless you, child.

    No really this was super helpful, thank you!

  78. Jarrid Lucas February 22, 2017

    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!

    • 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%;
      }
      }

  79. Thank you! Very much… I used JS code..
    Is it increases loading time…

  80. Great post, solved my problem!

  81. thank you for this tutorial!

    I have a question:
    how can I add a side column next (on the right for example) to the video?

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

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

  84. Paul Fabbroni February 8, 2017

    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.

    • Right, sites that weren’t built to be responsive… can’t be responsive. That’s an issue with the site you’re loading in your iframe.

  85. Thank you for writing this post.

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

  87. Agus Marsono October 1, 2016

    Thank you, this is very helpful for my thesis project!

  88. Works very well! thank you

  89. These tricks worked perfectly, thank you so much ! 🙂

  90. Thank you! Nothing except your “Proportionally Resize iframes Using JS” have helped me!

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

  92. Joe Ryan Stephens August 22, 2016

    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.

  93. I was able to get the iframe to be responsive but the contents in the iframe are not.

  94. So if I’m using a service like Website Builder with Godaddy (I’m not a website coder), I have to have access to CSS, which I don’t. Any other way to do it?

  95. Thank you Ben ! The article was of great help !

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

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

  98. Hello! This is wonderful idea! Thank you very much! 😀

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

  100. Jim Krill May 15, 2016

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

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

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

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

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

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

  102. Works great Ben, thank you for sharing this solution.

  103. I followed this example exactly, including your example frame and the frame also disappears for me.

    • Be sure to include the padding class if following this example word by word. If no padding-bottom exists on the container, it won’t show.

  104. It is helpful!!
    You all are try this one also:-
    http://shar.es/1gysdZ

  105. I had the same issue – my videos disappeared trying your code. This example worked for me: http://avexdesigns.com/responsive-youtube-embed/

  106. Hey, thanks for this information, solved the challenge I was faced with. I appreciate your taking the time to post.

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

  108. hi,

    after adding div to my page and code to css file, the iframe no longer appears 🙁 can you please advise? thank you!

Leave a Reply

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

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

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

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.

icon-search icon-link