Take the 2-minute tour ×

[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 that there is more extensive documentation on interacting with YouTube movies, so I will pursue that, but any more information is also welcome]

I am using embedded YouTube videos in a collection of divs that are being rotated by using the jQuery cycle plugin (http://malsup.com/jquery/cycle/).

I would like the cycle to stop when I click on one of the movies to start it playing, but I can't figure out how to attach a jQuery event handler to the player object.

Here's what my current code looks like (you can't directly select an object tag with jQuery, so I select the parent div and then get the object element as the first child):

$("div.feature-player").children(":first").click(function(event) {

But that doesn't do the trick. I'm not a Flash author, so I'm not really familiar with ActionScript, and I've never set up an interaction between JavaScript and a Flash movie before.

Thanks for any help!


share|improve this question
add comment

4 Answers

up vote 10 down vote accepted

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
    case 2:
    case 0:
      // Video has been paused/ended

function onYouTubePlayerReady(id){
  var player = $('#' + id)[0];
  if (player.addEventListener) {
    player.addEventListener('onStateChange', 'handlePlayerStateChange');
  else {
    player.attachEvent('onStateChange', 'handlePlayerStateChange');
share|improve this answer
You rock, man. Thanks a million. –  gravelpot Oct 7 '09 at 5:51
+1 for a working demo. –  Justin Gallagher Sep 13 '10 at 18:37
add comment

Flash movies are pretty much black boxes as far as javascript is concerned. If the SWF you're using wasn't written to interact with javascript then you're probably out of luck.

You'll either need to figure out what javascript methods the movie you're using exposes (hopefully it has documentation), find another one that does provide javascript interaction, or write your own SWF to handle it.

share|improve this answer
add comment

What you're looking for is the flash ExternalInterface class, which is used for communication from flash to javascript and from javascript to flash.

share|improve this answer
but I assume this presumes that I can edit/modify the Flash movie? I'm not in a position to modify the Flash movie player -- I'm just feeding it .mov files to play. –  gravelpot Oct 6 '09 at 19:43
Yea, you're right. –  willurd Oct 7 '09 at 18:31
add comment

If you're embedding the player using swfobject you're going to want to use swfobject.getObjectById to get a reference to the movie. Read the docs to see why you need to do this.

Also you'll need to set {wmode:"transparent"} for the player in order for it to bubble up click events to JavaScript.

share|improve this answer
If you post some of your code I might be able to be more specific. –  Josh Knauer Oct 6 '09 at 20:01
AFAIK that won't help him get events from within the SWF though. If a button that's part of the SWF UI is clicked that information won't propagate up to javascript. –  Herms Oct 6 '09 at 20:02
Based on the code snippet in the question, it looks like he's just trying to respond to any click on the movie. –  Josh Knauer Oct 6 '09 at 20:06
Ah, missed that. If it's just to get any click on the SWF then this could work. I misread and thought he was going for a click of a particular element in the SWF. –  Herms Oct 6 '09 at 20:10
add comment

Your Answer


