How do I attach a jQuery event handler to a YouTube movie?

Question

[EDIT: Sorry to those who already answered -- in my sleep-deprived state, I forgot that this particular situation is a YouTube movie, not the JW FLV player. I can see th

Answer 1

The YouTube player API is pretty straight-forward. You just have to listen to the onStateChange event and control the cycle plugin depending on the state:

Here's a working demo: http://jsbin.com/izolo (Editable via http://jsbin.com/izolo/edit)

And the pertinent code:

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

function onYouTubePlayerReady(id){
  var player = $('#' + id)[0];
  if (player.addEventListener) {
    player.addEventListener('onStateChange', 'handlePlayerStateChange');
  }
  else {
    player.attachEvent('onStateChange', 'handlePlayerStateChange');
  }
}