jQuery cycle - youtube videos not pausing the slideshow when played?

I am wracking my brains on this as I have tried endlessly to make a jQuery cycle slideshow that contains both images and youtube videos and is able to pause the cycle slideshow when a youtube video is played.

I have found this example: How do I attach a jQu开发者_如何学JAVAery event handler to a YouTube movie?

Which seemed to work as well as when I integrated it into my own code: http://jsfiddle.net/waffl/qqWT8/18/

Now I'm not sure what's going on, but neither example seems to work now!

If anyone has any ideas, it seems to have something to do with the event handlers not being attached, but I can't understand why something that seemed to work before suddenly doesn't.

I had been having the same problem, I made a few changes to your fiddle and I was able to get it working. Here is the JavaScript:

var slideshowContainer = $('#slideshow');

window.handlePlayerStateChange = function(state) {
    switch (state) {
    case 1:
        // Video has begun playing/buffering
        slideshowContainer.cycle('pause');
        break;
    case 3:
        // Video has begun playing/buffering
        slideshowContainer.cycle('pause');
        break;
    case 2:
        // Video has been paused/ended
        slideshowContainer.cycle('resume');
        break;
    case 0:
        // Video has been paused/ended
        slideshowContainer.cycle('resume');
        break;
    }
}

window.onYouTubePlayerReady = function(id) {
    var player = $('#' + id)[0];

    player.addEventListener('onStateChange', 'handlePlayerStateChange');
}

var videos = ['uCr--23_AW0', 'd8h5ZuPQWZw', 'ur1_aVRLLfA', 'rDcQtg6Bgvo', 'fgJ6DA50thw', 'MD3UldIQaUo', 'IwVpZGgWdWk', 'TvCUvVkGyqQ', 'FGzRvYU0e3Q'];

var params = {
    allowfullscreen: 'true',
    allowscriptaccess: 'always',
    wmode: 'opaque'
};

for (var i = 0; i < videos.length; i++) {
    var id = 'video-' + i;

    var atts = {
        id: id,
        name: id
    };

    slideshowContainer.append($('<div/>')
        .addClass('video-wrapper')
        .append($('<div/>')
                .attr('id', id)
               )
    );

    swfobject.embedSWF('http://www.youtube.com/v/' + videos[i] + '?enablejsapi=1&playerapiid=' + id + '&version=3', id, '540', '375', '9.0.0', null, null, params, atts);
}

slideshowContainer.cycle({
    fx: 'fade',
    timeout: 8000,
    next: '#next',
    prev: '#prev'
});​

and a working example: http://jsfiddle.net/jackbrown/qqWT8/45/