octoxan
11/12/2014 - 2:53 PM

Responsive iframes

Responsive iframes

jQuery(function ($) {
    $(document).ready(function () {
        if (typeof IFRAME_MARGIN == 'undefined') {
            IFRAME_MARGIN = 5;
        }
        $('iframe').each(function (index, item) {
            if ($(item).attr('src').match(/iframebasedomaingoeshere/)) {
              //eg for a youtube video just replace the above with youtube
                var w = $(item).attr('width');
                var h = $(item).attr('height');
                var ar = h / w * 100;
                ar = ar.toFixed(2);
                $(item).css('position', 'absolute');
                $(item).css('top', '0');
                $(item).css('left', '0');
                $(item).css('width', '100%');
                $(item).css('height', '100%');
                $(item).css('max-width', w + 'px');
                $(item).css('max-height', h + 'px');
                $(item).wrap('<div style="max-width:' + w + 'px;margin:0 auto; padding:' + IFRAME_MARGIN + 'px;" />');
                $(item).wrap('<div style="position: relative;padding-bottom: ' + ar + '%; height: 0; overflow: hidden;" />');
            }
        });
    });
});