Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@aarongustafson

This comment has been minimized.

Show comment
Hide comment
@aarongustafson

aarongustafson Oct 25, 2011

This could probably be done better, but this was a first stab.

Owner

aarongustafson commented Oct 25, 2011

This could probably be done better, but this was a first stab.

@timiles

This comment has been minimized.

Show comment
Hide comment
@timiles

timiles Jun 20, 2012

This is great, cheers! Except I changed the last line to:
$(window).on('resize load', adjustIframes);
Presumably WIN is something from another library you were including?

timiles commented Jun 20, 2012

This is great, cheers! Except I changed the last line to:
$(window).on('resize load', adjustIframes);
Presumably WIN is something from another library you were including?

@aarongustafson

This comment has been minimized.

Show comment
Hide comment
@aarongustafson

aarongustafson Jun 24, 2012

Yeah, it was a reference to window.

Owner

aarongustafson commented Jun 24, 2012

Yeah, it was a reference to window.

@screets

This comment has been minimized.

Show comment
Hide comment
@screets

screets commented Sep 12, 2012

@danny-englander

This comment has been minimized.

Show comment
Hide comment
@danny-englander

danny-englander Sep 12, 2012

This is really interesting. I just tried this with some iframe videos in a responsive theme I am working on and my only issue is that the video poster at very small widths seems a bit distorted. I know this is probably an edge case but this certainly is better than what I had which was nothing. Thank you! :)

danny-englander commented Sep 12, 2012

This is really interesting. I just tried this with some iframe videos in a responsive theme I am working on and my only issue is that the video poster at very small widths seems a bit distorted. I know this is probably an edge case but this certainly is better than what I had which was nothing. Thank you! :)

@arnolddelacruz

This comment has been minimized.

Show comment
Hide comment
@arnolddelacruz

arnolddelacruz commented Apr 25, 2013

@mbseid

This comment has been minimized.

Show comment
Hide comment
@mbseid

mbseid 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.

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

This comment has been minimized.

Show comment
Hide comment
@mauricewn

mauricewn Jun 11, 2013

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

mauricewn commented Jun 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@nateluzod

nateluzod Jul 13, 2013

Thank you!

nateluzod commented Jul 13, 2013

Thank you!

@ovysimon

This comment has been minimized.

Show comment
Hide comment
@ovysimon

ovysimon Jul 24, 2013

Works great! Thank you very much!

ovysimon commented Jul 24, 2013

Works great! Thank you very much!

@Miciurash

This comment has been minimized.

Show comment
Hide comment
@Miciurash

Miciurash Nov 30, 2013

Great job, thx!

Miciurash commented Nov 30, 2013

Great job, thx!

@sstjohn0450

This comment has been minimized.

Show comment
Hide comment
@sstjohn0450

sstjohn0450 Dec 9, 2013

Very cool! Thanks!

sstjohn0450 commented Dec 9, 2013

Very cool! Thanks!

@obxdesignworks

This comment has been minimized.

Show comment
Hide comment
@obxdesignworks

obxdesignworks Jan 23, 2014

Nice work, Aaron. Works like a charm.

obxdesignworks commented Jan 23, 2014

Nice work, Aaron. Works like a charm.

@davidjbradshaw

This comment has been minimized.

Show comment
Hide comment
@davidjbradshaw

davidjbradshaw Mar 20, 2014

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

davidjbradshaw commented Mar 20, 2014

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

This comment has been minimized.

Show comment
Hide comment
@fahmi182

fahmi182 Sep 17, 2014

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

fahmi182 commented Sep 17, 2014

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

@magamig

This comment has been minimized.

Show comment
Hide comment
@magamig

magamig Jul 5, 2015

Great! It just does the job 😃

magamig commented Jul 5, 2015

Great! It just does the job 😃

@Bhagirathsheela

This comment has been minimized.

Show comment
Hide comment
@Bhagirathsheela

Bhagirathsheela Nov 28, 2017

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

Bhagirathsheela commented Nov 28, 2017

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