Allows videos within a flexslider to stop the slider when playing, and continue the slider when done.

silder

$(function() {
	var slider, // Global slider value to force playing and pausing by direct access of the slider control
		canSlide = true; // Global switch to monitor video state
 
	// Load the YouTube API. For some reason it's required to load it like this
	var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
    // Setup a callback for the YouTube api to attach video event handlers
	window.onYouTubeIframeAPIReady = function(){
		// Iterate through all videos
		$('.flexslider iframe').each(function(){
			// Create a new player pointer; "this" is a DOMElement of the player's iframe
			var player = new YT.Player(this, {
				playerVars: {
					autoplay: 0
				}
			});
 
			// Watch for changes on the player
			player.addEventListener("onStateChange", function(state){
				switch(state.data)
				{
					// If the user is playing a video, stop the slider
					case YT.PlayerState.PLAYING:
						slider.flexslider("stop");
						canSlide = false;
						break;
					// The video is no longer player, give the go-ahead to start the slider back up
					case YT.PlayerState.ENDED:
					case YT.PlayerState.PAUSED:
						slider.flexslider("play");
						canSlide = true;
						break;
				}
			});

			$(this).data('player', player);
		});
	}
 
	// Setup the slider control
	slider = $(".flexslider")
		.flexslider({
	    	animation: "fade",
			easing: "swing",
			slideshowSpeed: 6500,
			animationSpeed: 900,
			pauseOnHover: true,
			pauseOnAction: true,
			touch: true,
			video: true,
			controlNav: true,
			animationLoop: true,
			slideshow: true,
			useCSS: false,
	    	// Before you go to change slides, make sure you can!
	    	before: function(){			    		
	    		if(!canSlide)
	    			slider.flexslider("stop");
	    	}
		});

	slider.on("click", ".flex-prev, .flex-next", function(){
		canSlide = true;
		$('.flexslider iframe').each(function(){
			$(this).data('player').pauseVideo();
		});
	});
});

hi LordZardeck,

I implemented the code but when I put the video in play the slideshow don't stop.

Can you help me?

the flexslider is defined like this:

<div class="flexslider">
      <ul class="slides">
         <li>
            <iframe width="560" height="315" id="youtubevideo" src="//www.youtube.com/embed/My2FRPA3Gf8/?enablejsapi=1&version=3&playerapiid=youtubevideo" allowfullscreen="" frameborder="0"></iframe>
        </li>
        <li> <img width="900px" alt="" src="<?=$base_template_url;?>/images/slideshow/slide-1.jpg"> <p class="flex-caption">Captions and cupcakes. Winning combination.</p></li>
        <li> <img width="900px" alt="" src="<?=$base_template_url;?>/images/slideshow/slide-2.jpg"></li>
      </ul>
    </div>

Thank you very much LordZardeck, you've helped me a lot!

Thanks.

It's working great on the windows based browsers but it's not working on android ?

Amazing. Thank you!

Hello LordZardeck, I have the same problem of ruidiasptm. Slider doesn't stop when video is playing. What could be wrong? Please help!

Unfortunately I have the same issues: Slider keeps rotating after playing a video. Only with the mouse over the slider stops.

Hi!
Thank you LordZardek for your solution!
For those who cannot make it work! Just change slider.flexslider("stop"); to slider.flexslider("pause");
After this fix it is working perfectly for me. Cheers!

Didnt help guys.. the slider is still moving :( there is a separate file called jquery.flexslider.js

i replaced it, amended it, changed the values.. still it didnt work :(

Thank You Sooooooo Much