Flexslider, is one of my favorite sliders around, I find it useful on several projects.
The one thing that I’ve found it was actually missing, was the ability to have multiple videos working with the vimeo API. For me, a complete headache. The awful sound a video overlapping on top of the other. Complete chaos!
So, reading a bit and after some tryouts I’ve developed a code which makes your slider works without any trouble having several vimeo videos.
You can check the demo here: DEMO
Let’s have a look at the entire code:
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")
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
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');
}
});
});Basically, it creates an array containing all the iframes inside the flexslider wrapper. Then, for each player inside those iframes it sets the event. Lastly, when you initialize the flexslider you set a function for the before action that pauses the player that loses focus.
It’s really straightforward. There are a couple of things to bear in mind:
1. Include froogaloop.js
2. You’ll need to revise each vimeo code and check that they have different id’s, and they use the API.
<iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&player_id=player_1" width="320" height="240"></iframe>
3. Enable videos in your flexslider configuration.
4. I think that’s all.
Have fun.
Leave a Reply