How to make an iframe responsive using jQuery

👋 Ciprian on Monday, September 25, 2017 in Blog
Last modified on Monday, September 25, 2017

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.

Buy me a coffee to support my work!

👋 Added by Ciprian on Monday, September 25, 2017 in Blog. Last modified on Monday, September 25, 2017.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy