jquery - Using Flexslider to play Youtube videos -
i'm trying integrate playing youtube video flexslider. it's got vimeo integration (which works) youtube doesn't play @ all. how can integrate it?
// can used $(document).ready() $(window).load(function() { // vimeo api nonsense var player = document.getelementbyid('player_1'); $f(player).addevent('ready', ready); function addevent(element, eventname, callback) { if (element.addeventlistener) { element.addeventlistener(eventname, callback, false) } else { element.attachevent(eventname, callback, false); } } function ready(player_id) { var froogaloop = $f(player_id); froogaloop.addevent('play', function(data) { $('.flexslider-project').flexslider("pause"); }); froogaloop.addevent('pause', function(data) { $('.flexslider-project').flexslider("play"); }); } // call fitvid before flexslider initializes, proper initial height can retrieved. $(".flexslider-project") .fitvids() .flexslider({ animation: "slide", controlnav: false, directionnav: true, slideshow: true, usecss: true, prevtext: '', nexttext: '', video: true, animationloop: true, smoothheight: false, before: function(slider){ $f(player).api('pause'); } }); }); this how it's output:
<iframe id="player_1" src="<?php echo the_sub_field('video'); ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
try this: froogaloop.js , jquery.fitvid.js available on download flexslider
<body class="loading"> <div id="container" class="cf"> <div id="main" role="main"> <section class="slider"> <div class="flexslider"> <ul class="slides"> <li> <iframe id="player_1" src="http://www.youtube.com/embed/gdsj5uz_1ba?rel=0&player_id=player_1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </li> </ul> </div> </section> </div> </div> <!-- jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- flexslider --> <script defer src="../jquery.flexslider.js"></script> <script type="text/javascript"> $(window).load(function(){ // vimeo api nonsense var player = document.getelementbyid('player_1'); $f(player).addevent('ready', ready); function addevent(element, eventname, callback) { (element.addeventlistener) ? element.addeventlistener(eventname, callback, false) : element.attachevent(eventname, callback, false); } function ready(player_id) { var froogaloop = $f(player_id); froogaloop.addevent('play', function(data) { $('.flexslider').flexslider("pause"); }); froogaloop.addevent('pause', function(data) { $('.flexslider').flexslider("play"); }); } // call fitvid before flexslider initializes, proper initial height can retrieved. $(".flexslider") .fitvids() .flexslider({ animation: "slide", usecss: false, animationloop: false, smoothheight: true, start: function(slider){ $('body').removeclass('loading'); }, before: function(slider){ $f(player).api('pause'); } }); }); </script> <!-- optional flexslider additions --> <script src="js/froogaloop.js"></script> <script src="js/jquery.fitvid.js"></script> </body> 
Comments
Post a Comment