Skip to content

Instantly share code, notes, and snippets.

@robincornett
Created November 23, 2013 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robincornett/7609763 to your computer and use it in GitHub Desktop.
Save robincornett/7609763 to your computer and use it in GitHub Desktop.
Use this to add fluidvids to your theme for responsive videos (https://github.com/toddmotto/fluidvids)
/*
Fluid and Responsive YouTube/Vimeo Videos v1.0.0
by Todd Motto: http://www.toddmotto.com
Latest version: https://github.com/toddmotto/fluidvids
Copyright 2013 Todd Motto
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
A raw JavaScript alternative to FitVids.js, fluid width video embeds
*/
(function() {
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; ++i) {
var iframe = iframes[i];
var players = /www.youtube.com|player.vimeo.com/;
if(iframe.src.search(players) !== -1) {
var videoRatio = (iframe.height / iframe.width) * 100;
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
var div = document.createElement('div');
div.className = 'video-wrap';
div.style.width = '100%';
div.style.position = 'relative';
div.style.paddingTop = videoRatio + '%';
var parentNode = iframe.parentNode;
parentNode.insertBefore(div, iframe);
div.appendChild(iframe);
}
}
})();
<?php
//* Do NOT include the opening PHP tag. This code needs to be added to your functions.php file.
//* Add fluidvids to theme
add_action ( 'wp_enqueue_scripts', 'rgc_fluidvid' );
function rgc_fluidvid() {
wp_enqueue_script( 'fluidvids', get_stylesheet_directory_uri() . '/lib/js/fluidvids.js', array(), false, true ); // Responsive Videos
}
//* You will need to create folders called lib/js inside your theme and put the fluidvids.js file in it, or else change the path above.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment