Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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 could probably be done better, but this was a first stab.

@timiles

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

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

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

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.