0

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 jQuery 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.

Community
  • 1
  • 1
waffl
  • 5,179
  • 10
  • 73
  • 123
  • I think you are missing the api initialization string: "enablejsapi=1" - e.g. "http://www.youtube.com/e/VIDEO_ID?enablejsapi=1&version=3" see http://code.google.com/apis/youtube/js_api_reference.html – Mottie May 08 '11 at 21:01
  • @fudgey I believe it is enabled in the `flashvar enablejsapi: 1` is it not? I've also tried adding the initializationstring to the swfobject embed call but it doesn't seem to work: `swfobject.embedSWF('http://www.youtube.com/v/' + videos[i]+'&enablejsapi=1', id, '540', '375', '9.0.0', false, flashvars, params);` – waffl May 08 '11 at 22:46

1 Answers1

0

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/

supajb
  • 487
  • 6
  • 11