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 hidden or 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 hidden or 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 hidden or 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); |
Thank you!
Works great! Thank you very much!
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
Can someone help clean this up for me? I tried embedding this into a WP javascript editor for use in a WP site, it doesn't work. I cleaned up the spacing syntax as they suggested, but I still get this:
function adjustIframes()
$this = $ (this),
{
$('iframe').each(function () {
var
proportion = $this.data('proportion'),
w = $this.attr('width'),
actual_w = $this.width();
$(window).on('resize load', adjustIframes);
!!!!!!!!!!!!!!!!!!!!Sorry for how this window is formatting the code!!!!!!!!!!!!!!!!!!!!!!!!
Errors
line 2 character 5
Expected exactly one space between ')' and '{'.
{
line 3 character 9
Missing 'use strict' statement.
$('iframe').each(function () {
line 3 character 9
'$' was used before it was defined.
$('iframe').each(function () {
line 11 character 17
Expected exactly one space between ')' and '{'.
{
line 16 character 26
Expected '!==' and instead saw '!='.
if (actual_w != w)
line 17 character 17
Expected exactly one space between ')' and '{'.
{
line 22 character 1
'$' was used before it was defined.
$(window).on('resize load', adjustIframes);
line 22 character 3
'window' was used before it was defined.
$(window).on('resize load', adjustIframes);
undefined
$
adjustIframes 1
, $
'each' 3