Responsive IFRAMEs

Discussion

1. R Geuze

   Very useful trick for displaying responsive (video) embeds.

   Note that, unlike for many other elements, using right: 0; bottom: 0; instead of width:100%;height:100% will not (always) work as expected for iframes.

   If you have access to the iframe target site as well, you can also write a solution based on the postMessage API to send the inner content height to the parent site.
   https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
2. Tom Lutzenberger

   Back in 2016 I used a JS-approach to do the same. Have a look :)

   https://codepen.io/tomlutzenberger/pen/oYByjE/
3. Raph

   This is the technique used by Bootstrap (3+). They call it “responsive embed” and provide 4:3 and 16:9 ratios.

   See the doc here : https://getbootstrap.com/docs/3.3/components/#responsive-embed
   Sources : https://github.com/twbs/bootstrap/blob/v3.3.7/less/responsive-embed.less
4. Ron

   Ben Marshall wrote an article about this subject in March 2014 and Updated it recently in May. His code is the same as David’s.

   He also posed the question — what if the aspect ratio is not known? Then you need a little bit of javascript. His solution is similar to Tom’s Codepen javascript above.

   // 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" );
   });
   
   // Resize the iframes when the window is resized
   $( window ).resize( function () {
     $iframes.each( function() {
       // Get the parent container's width
       var width = $( this ).parent().width();
       $( this ).width( width )
         .height( width * $( this ).data( "ratio" ) );
     });
   // Resize to fix all iframes on page load.
   }).resize();
   

   There are other types of embedded iFrames of the “media” variety. All of the frameworks and preset ratios are even limiting. Raph’s cited Bootstrap methods above are examples of only two embed ratios.

   Now the reason I am here! LOL

   I needed to have a responsive iFrame for a chat room. It had to stick to the to the sides (that part is easy). It also had to stick to the bottom of the header & the top the footer. And be resizable.

   That snippet of code made it all work. The behaviour is much like a frameset with fixed height top and bottom frames.
5. Srikanth

   Thanks a Lot David,

   I have issue with a WP “Accordion” Plugin from @siteorigin, as usual every body pointed the finger at other plugins, fixed the iframe issue, the plugin set the width & height of the Iframe to 0 if the accordion was set to be closed while page load.

   /* .iframe-container */
   .sow-accordion-panel-content .jetpack-video-wrapper {
     	position: relative;
       overflow: hidden;
       padding-top: 56.25%;
   }
   
   /* css for the iframe */
   .sow-accordion-panel-content .su-column iframe {
        position: absolute;
       top: 0;
       left: 0;
       width: 100% !important;
       height: 100% !important;
       border: 0;
   }
   

   thanks once again..
6. Ilya

   Hi David,
   thanks a lot for your solution.
   I had a little problem using it. Namely, when I used it just as you suggested in my project, I got a black frame on the top and bottom of the video. Long story short, it turned out that my video container had a non-zero height (I didn’t define height for it at all), therefore the ratio of 56.25% didn’t work properly. So, to make this solution perfect I would add a height of 0:

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

   Hi, I’m not very sophisticated in CSS and appreciate Dave’s post which seems to work well for me in making the Youtube video responsive. But I’m getting a lot of blank white space between the bottom of my responsive embedded video and the text that follows it. I’ve removed all and tags after the container so the space seems defined by the iframe somehow. When I change the padding top to a smaller percent, the space under the video gets smaller but so does the video. I’m coding this by hand so not using any framework. Any suggestions how to remove the large white space gap between the video and the text that follows? thanks from a novice.