How to make an iframe responsive using jQuery

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

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.

Added by Ciprian on Monday, September 25, 2017 in Blog

Contribute!

Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy