Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Make iframes responsive by calculating the correct aspect ratio and filling to the width of the container as it flexes.

View responsive-iframes.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// iframes
var $iframes = $( document.querySelectorAll( '.videos iframe' ) );
 
function iframeSizing() {
var $this = $( this ),
width = $this.width(),
height = $this.height(),
containerWidth = $this.parent().width(),
heightRatio = height / width,
newHeight = heightRatio * containerWidth;
 
$this.width( containerWidth );
$this.height( newHeight );
}
 
function iframesEachSizing() {
$iframes.each( iframeSizing );
}
 
iframesEachSizing();
 
$( window ).resize( iframesEachSizing );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.