bherrero
8/11/2015 - 1:09 PM

Multiple videos with Flexslider #flexslider #video #slider

Multiple videos with Flexslider #flexslider #video #slider

flexslider.html
content_copyfile_download
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
        <iframe id="player_2" src="http://player.vimeo.com/video/27243869?api=1&player_id=player_2" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
        <iframe id="player_3" src="http://player.vimeo.com/video/27244727?api=1&player_id=player_3" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li>
        <iframe id="player_4" src="http://player.vimeo.com/video/27246366?api=1&player_id=player_4" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
<ul>
</div>
flex-init.js
content_copyfile_download
jQuery(window).load(function() {
 
    var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;
 
    for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
            player = vimeoPlayers[i];
            $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) {
            jQuery('.flexslider').flexslider("pause");
        });
        froogaloop.addEvent('pause', function(data) {
            jQuery('.flexslider').flexslider("play");
        });
    }
 
    jQuery(".flexslider")
    .fitVids()
    .flexslider({
        animation: "slide",
        animationLoop: false,
        smoothHeight: true,
        useCSS: false,
        before: function(slider){
            if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
                  $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');
        }
    });
 
});