Skip to content

Instantly share code, notes, and snippets.

@richjenks
Created December 13, 2014 08:40
Show Gist options
  • Select an option

  • Save richjenks/a6f7999d55a32a62bb12 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown
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