Created
November 23, 2013 01:48
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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); | |
} | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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