Responsive iFrames with jQuery

HTML
iframe {
    max-width: 100%;
}
Javascript
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);

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>