pause youtube video on next slide using cycle plugin

Question

I have an embedded YouTube video in a slideshow (MaxImage using the Cycle Plugin) that I am trying to pause once the user clicks to the next slide. There is a built in function for HTML5 videos, but I'm just not sure of how to do the same for YouTube. Thanks!

Notice the before and after functions..

$(function(){
$('#maximage').maximage({
    cycleOptions: {
        fx: 'fade',
        speed: 600,
        timeout: 0,
        prev: '.prev',
        next: '.next',
        pause: 1,
        before: function(last,current){
            if(!$.browser.msie){
                // Start HTML5 video when you arrive
                if($(current).find('video').length > 0) $(current).find('video')[0].play();
                }
            },
        after: function(last,current){
            if(!$.browser.msie){
                // Pauses HTML5 video when you leave it
                if($(last).find('video').length > 0) $(last).find('video')[0].pause();
            }
        },    

        onFirstImageLoaded: function(){
        jQuery('#loader').hide();
        jQuery('#maximage').fadeIn(200);
    }
});         
});

Answer 1

You need to make use of the iFrame API, otherwise you cannot interact with the video due to cross-domain policy:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
$('#maximage').maximage({
    cycleOptions: {
        fx: 'fade',
        speed: 600,
        timeout: 0,
        prev: '.prev',
        next: '.next',
        pause: 1,
        before: function(last,current){
            if(player != null) player.playVideo()
        },
        after: function(last,current){
            if(player != null) player.pauseVideo()
        },    

        onFirstImageLoaded: function(){
        jQuery('#loader').hide();
        jQuery('#maximage').fadeIn(200);
    }
});