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.