hook to click event inside embedded youtube player
Solution 1
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');
Solution 2
Might be helpful ... edit according to your requirement http://jsfiddle.net/masiha/4mEDR/
Solution 3
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
Solution 4
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
Comments
-
Alexander Bird over 3 years
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?
-
Alexander Bird over 12 yearsSince I'm a noob at this: what code would I put in my js file (or html) to utilize that event?
-
Jakub Roztocil over 12 yearsI've extended my answer, hope it will be more helpful now.
-
Martti Laine over 12 yearsThis would trigger the callback function on every event, such as cue, buffer, play, pause, stop, end.
-
S.L. Barth over 11 yearsWelcome to StackOverflow! If I get it right, this video helped? If so, would you please add an excerpt of that information here? That way your answer will remain useful if the link dies.
-
Charles Caldwell over 11 yearsCan you use the name's of the people whose suggestions didn't work? Unfortunately, on this site one can sort the answers in many different manners and hence "above" has no meaning.
-
declan over 11 yearsGreat fiddle. Very key detail which Masiha does not mention... the string
'player'
in the linenew YT.Player('player', ...
is a reference to the ID of the iFrame that embeds the YouTube video. -
Helen Neely over 10 yearsThis is a very concise example - liked it. Thanks for sharing the link :)
-
user25 almost 9 yearsit doesn't alert for me. why?
-
serge about 8 yearswhat do you mean by "MY-PLAYER-ID" here?
-
serge about 8 yearswhat exactly "id of the embedded player" should we search? the <iframe> id or embedded id of the youtube video?
-
Jakub Roztocil about 8 years@Serge: the ID of your player element
-
serge about 8 yearswhat do you mean by "player element": the <iframe> id?
-
Jakub Roztocil about 8 yearsThis Q/A is very old. There's probably a new API these days.