Skip to content

Instantly share code, notes, and snippets.

@aarongustafson
Created October 25, 2011 17:07
Show Gist options
  • Save aarongustafson/1313517 to your computer and use it in GitHub Desktop.
Save aarongustafson/1313517 to your computer and use it in GitHub Desktop.
Responsive iFrames with jQuery
iframe {
max-width: 100%;
}
<!-- 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>
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);
@magamig
Copy link

magamig commented Jul 5, 2015

Great! It just does the job 😃

@Bhagirathsheela
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment