Responsive iFrame Videos

fluid-video.js

// Responsive Video script
// Adapted from toddmotto
// https://github.com/toddmotto/toddmotto.github.io/blob/master/_posts/2013-01-22-fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js.md

// Grab all iframes
var iframes = document.getElementsByTagName( 'iframe' );

// Loop through all the iframes
for ( var i = 0; i < iframes.length; i++ ) {

  var iframe = iframes[i];
  
  // Add compatible video services
  var players = /www.youtube.com|player.vimeo.com/;

  // If the RegExp pattern exists within the current iframe
  if ( iframe.src.search( players ) > 0 ) {

    // Calculate the video ratio based on the iframe's w/h dimensions
    var videoRatio = ( iframe.height / iframe.width ) * 100;

    // Replace the iframe's dimensions and position
    iframe.style.position = 'absolute';
    iframe.style.top      = '0';
    iframe.style.left     = '0';
    iframe.width          = '100%';
    iframe.height         = '100%';

    // Wrap the iframe in a new, repsonsive <div>
    var wrap              = document.createElement( 'div' );
    wrap.className        = 'fluid-video';
    wrap.style.width      = '100%';
    wrap.style.position   = 'relative';
    wrap.style.paddingTop = videoRatio + '%';

    // Add the iframe inside our responsive <div>
    var iframeParent      = iframe.parentNode;
    iframeParent.insertBefore( wrap, iframe );
    wrap.appendChild( iframe );

  }
}// END for loop