Responsive iFrames

responsive-iframes.js

$.fn.ready(function(){

    $("iframe").each(function() {
        var $iframe = $(this),
            width = $iframe.attr("width") || $iframe.width(),
            height = $iframe.attr("height") || $iframe.height();

        var $wrapper = $("<div></div>")
            .css({
                "position": "relative",
                "height": "0",
                "overflow": "hidden",
                "padding-bottom": (height / width * 100) + "%",
              });

        $iframe
            .removeAttr("width")
            .removeAttr("height")
            .css({
                "position": "absolute",
                "top": "0",
                "left": "0",
                "width": "100%",
                "height": "100%",
            })
            .wrap($wrapper);
    });

});