Created
October 25, 2011 17:07
-
-
Save aarongustafson/1313517 to your computer and use it in GitHub Desktop.
Responsive iFrames with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
iframe { | |
max-width: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Great job, thx!
Very cool! Thanks!
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.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Works great! Thank you very much!