Skip to content

Instantly share code, notes, and snippets.

@influxweb
Created March 13, 2014 20:10
Show Gist options
  • Save influxweb/9535945 to your computer and use it in GitHub Desktop.
Save influxweb/9535945 to your computer and use it in GitHub Desktop.
Responsive iFrames with jQuery https://gist.github.com/aarongustafson/1313517
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment