Skip to content

Instantly share code, notes, and snippets.

@octoxan
Last active April 11, 2017 15:02
Show Gist options
  • Save octoxan/e9f51410abdbe4947675 to your computer and use it in GitHub Desktop.
Save octoxan/e9f51410abdbe4947675 to your computer and use it in GitHub Desktop.
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;" />');
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment