Iframe youtube multiple videos tracking

1
votes

I have a webpage with several iframe youtube videos embedded in it.

<html>
<body>
<iframe width="420" height="345" src="http://www.youtube.com/embed/video1"></iframe>
<iframe width="420" height="345" src="http://www.youtube.com/embed/video2"></iframe>
<iframe width="420" height="345" src="http://www.youtube.com/embed/video3"></iframe>
</body>
</html>

In the script side, i have to find which video is clicked and started to play.

example: if a user click video1, then the script alert "http://www.youtube.com/embed/video1"

if a user click video2, then the script alert "http://www.youtube.com/embed/video2"

if a user click video3, then the script alert http://www.youtube.com/embed/video3

Thanks in advance.

1
javascriptjqueryiframeyoutube

1 Answers

2
votes

You can use YouTube IFrame API ( https://developers.google.com/youtube/iframe_api_reference ) which responds to video state changes. To each src add ?enablejsapi=1, setup api and take a look at onStateChange event.

JSFiddle