How to make an iframe responsive using jQuery

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.