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);
@mbseid
Copy link

mbseid commented May 7, 2013

Works well. We use it at NPR. If you have any problems file an issue. Always trying to make sure we keep up cross browser compatibility.

@mauricewn
Copy link

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()
{
$('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);

!!!!!!!!!!!!!!!!!!!!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

@nateluzod
Copy link

Thank you!

@ovysimon
Copy link

Works great! Thank you very much!

@Miciurash
Copy link

Great job, thx!

@sstjohn0450
Copy link

Very cool! Thanks!

@williamdodson
Copy link

Nice work, Aaron. Works like a charm.

@davidjbradshaw
Copy link

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

@fahmi182
Copy link

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

@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