Cycle2: automatically pause slideshow (timeout) when YouTube-video is played

Question

I would like to pause my Cycle2 slideshow, when a user clicks on a YouTube play-button (http://jquery.malsup.com/cycle2/demo/video.php)

Important code part:

data-cycle-timeout=5000
data-cycle-youtube=true
data-cycle-youtube-autostart=false

My workaround so far is setting pause-on-hover - but of course, ish ain't workin' when the user mouseleaves the slideshow

data-cycle-pause-on-hover="true"

Is there maybe some kind of hidden function to pause the slideshow on video play?

Answer 1

If You are using data-cycle-youtube=true - try out this simple JS/JQuery code along with Youtube API:

1) find all players and attach EventListeners on them

2) handle player state change and do whatever You want. Here pause/resume slideshow

function onYouTubePlayerReady(){     
      var players = $('.cycle-youtube embed').each(function(){   
        if(this.addEventListener) {  
          this.addEventListener('onStateChange', 'handlePlayerStateChange');     
        }else{ 
          this.attachEvent('onStateChange', 'handlePlayerStateChange');  
        }    
      });    
}
function handlePlayerStateChange(state) {    
      switch(state) {    
        case 1: case 3:  // Video has begun playing/buffering    
            $('.cycle-slideshow').cycle('pause'); 
        break;   
        case 2: case 0: // Video has been paused/ended   
            $('.cycle-slideshow').cycle('resume');   
        break;   
      }  
}