Responsive iFrames with jQuery

responsive-iframes.css

iframe {
  max-width: 100%;
}

responsive-iframes.html

<!-- All you need is a defined width & height -->
<iframe frameborder="0" height="426" src="http://www.slideshare.net/slideshow/embed_code/9812085?rel=0" width="510"></iframe>

responsive-iframes.js

function adjustIframes()
{
  $('iframe').each(function(){
    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).on('resize load',adjustIframes);

Nice work, Aaron. Works like a charm.

For a more complete solution that keeps the iframe size to the content when the content changes, or the browser resizes. Check out this library.

https://github.com/davidjbradshaw/iframe-resizer

This is using Jquery? how about not using Jquery? :)

Great! It just does the job 😃

this is not working in IE. Can Someone Suggest any solution? Thank You