Skip to content

Instantly share code, notes, and snippets.

@richjenks
Created December 13, 2014 08:40
Show Gist options
  • Save richjenks/a6f7999d55a32a62bb12 to your computer and use it in GitHub Desktop.
Save richjenks/a6f7999d55a32a62bb12 to your computer and use it in GitHub Desktop.
Responsive iframes, requires jQuery
// Find all iframes
var iframes = jQuery("iframe");
// Find & save the aspect ratio for all iframes
iframes.each(function () {
jQuery(this).data("ratio", this.height / this.width)
// Remove the hardcoded width & height attributes
.removeAttr("width")
.removeAttr("height");
});
// Resize the iframes when the window is resized
jQuery(window).resize(function () {
iframes.each(function() {
// Get the parent container's width
var width = jQuery(this).parent().width();
jQuery(this).width(width)
.height(width * jQuery(this).data("ratio"));
});
});
// Resize to fix all iframes on page load.
jQuery(document).ready(function() {
jQuery(window).resize();
});
@richjenks
Copy link
Author

Props to Ben Marshall for the JS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment