Skip to content

Instantly share code, notes, and snippets.

@twmbx

twmbx/flexvideo.js

Created December 16, 2013 12:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twmbx/7986293 to your computer and use it in GitHub Desktop.
Save twmbx/7986293 to your computer and use it in GitHub Desktop.
Download ZIP
Adding Zurb Foundation Flex Video classes to html iframes on dynamic sites using Javascript. Useful on wordpress sites where contributors may not always follow best practice. Requires jQuery or Zepto, hacked from fitvids.js
Raw
flexvideo.js
(function( $ ){
$.fn.flexvids = function() {
"use strict";
return this.each(function(){
var selectors = [
"iframe[src*='player.vimeo.com']",
"iframe[src*='youtube.com']",
"iframe[src*='youtube-nocookie.com']",
"iframe[src*='kickstarter.com'][src*='video.html']",
"object",
"embed"
];
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not("object object"); // SwfObj conflict patch
$allVideos.each(function(){
var $this = $(this);
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length) { return; }
$this.wrap('<div class="flex-video"></div>');
});
});
};
})( window.jQuery || window.Zepto );
Raw
index.html
<html>
<body>
<!-- Site Content Here -->
<!-- This example is for usage with the Flex Video feature of Zurb's Foundation 5
those requirements are not included here, please do that yourself to have this code work as expected.
the example will only change markup, CSS styling isn't included obviously -->
<!-- This is the video that will get wrapped -->
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/U3cFvC0G_wY?rel=0" frameborder="0" allowfullscreen></iframe>
<!-- include jQuery (or zepto) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/jquery-2.0.2.min.js"></script>
<!-- include the flexvids js script -->
<script src="flexvids.js"></script>
<!-- excute on load -->
<script type="text/javascript">
$(".the-content").flexvids();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment