Skip to content
Create a gist now

Instantly share code, notes, and snippets.

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
Owner

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

@timiles
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
Owner

Yeah, it was a reference to window.

@danny-englander

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

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

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

Thank you!

@ovysimon

Works great! Thank you very much!

@Miciurash

Great job, thx!

@sstjohn0450

Very cool! Thanks!

@obxdesignworks

Nice work, Aaron. Works like a charm.

@davidjbradshaw

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 is using Jquery? how about not using Jquery? :)

@magamig
magamig commented Jul 5, 2015

Great! It just does the job :smiley:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.