How to make an iframe responsive using jQuery

Ciprian on Monday, September 25, 2017 in Blog

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Stubborn iframes can be tamed using a simple jQuery trick and a couple of code tweaks. First of all, the iframe shouldn’t have any height or scrolling attributes. Second, there shouldn’t be any styling associated with height or content overflow. Third, use the code below to tame the iframe.

$(document).ready(function() {
    var calcHeight = function() {
        $('#frameId').height($(window).height());
    }

    calcHeight();

    $(window).resize(function() {
        calcHeight();
    }).load(function() {
        calcHeight();
    });
});

Enjoy!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Related posts

One comment on “How to make an iframe responsive using jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *