CODEWITHSUNDEEP
javascriptjqueryhtmlyoutube-api
Alexander Bird
Alexander Bird

Reputation: 40668

hook to click event inside embedded youtube player

I want to run a function called stopSlide whenever someone clicks the 'play' button on an embedded youtube video. Or even getting the function to run when they click anywhere inside the embedded video would work fine for me right now.

How can I do this?

Upvotes: 15

Views: 23217

Answers (5)

Yogesh ravi
Yogesh ravi

Reputation: 41

Upto my knowledge you can't detect a click inside a iframe,or you can't trigger any click event inside the iframe My solution is place a button inside the Iframe set it's properties as transparent(opacity) inside that button you can call your click function using playmethod and pause method you can enable autoplay

Upvotes: 1

Ben
Ben

Reputation: 11

i tried using the suggestions above but didnt succeed. it can't handle timer slider. please see Google example for automatic slider, they used a popup for the video. google slider with embedded video

Upvotes: 1

May
May

Reputation: 207

Might be helpful ... edit according to your requirement http://jsfiddle.net/masiha/4mEDR/

Upvotes: 9

Jakub Roztocil
Jakub Roztocil

Reputation: 16252

There is a YouTube JavaScript API that provides event callbacks.

There is, unfortunately, no way to directly detect a click event (at least I am not aware of any). You can, however, detect changes in the player state for which you can use onStateChange.

First, you will need to enable the JS API in the player by embedding it by using a special URL:

http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1

Then you need to create an event handler function:

function player_state_changed(state) {
  /* This event is fired whenever the player's state changes.
     Possible values are:
     - unstarted (-1)
     - ended (0)
     - playing (1)
     - paused (2) 
     - buffering (3)
     - video cued (5). 
     When the SWF is first loaded it will broadcast an unstarted (-1) event.
     When the video is cued and ready to play it will broadcast a video cued event (5).
  */

  if (state == 1 || state == 2) {
    alert('the "play" button *might* have been clicked');
  }

}

Lastly, you need to make sure that the handler gets called whenever the state of the movie changes:

document.getElementById('MY-PLAYER-ID').addEventListener('onStateChange', 'player_state_changed');

Upvotes: 11

JKing
JKing

Reputation: 847

You need to just register an event listener on the player to call your stopSlide function. The following line of code should do it for you (first you have to replace the two "strings" with the appropriate values - the ID of the embedded player, and the name of the function that you want to call. eg: "stopSlide"):

document.getElementById("_idOfEmbeddedPlayerElement_").addEventListener("onStateChange", "_nameOfFunctionToCall_");`

Upvotes: 0

Related Questions