How to add a function to execute when a YouTube video is done playing?

Question

So let's say that I embed a youtube video, and when it's done playing, I want it to do this function. How would I detect that the video is done playing?

I'm assuming that the video varies in length. So I know the video will be done in 5 minutes but I want to generalize it so that when an "x" minute video is done playing it calls this function.

This all the HTML that I have if it matters.... (excuse the cat video lol)

<html>
<head>
<title>Discovery</title>
</head>
<body>

<iframe width="560" height="315" src="http://www.youtube.com/embed/bDuLeXx2Gv0?autoplay=1" frameborder="0" allowfullscreen></iframe>


</body>
</html>

You can may try this stackoverflow link: http://stackoverflow.com/questions/6896625/how-to-call-a-function-on-video-end-html5-and-mediaelementjs — Alessander França, Dec 31 '14 at 18:59

Ryan Rich · Answer 1 · 2014-12-31T19:10:52.297

1

Since you're using Youtube you can do something like this:

function onPlayerStateChange(event) {        
    if(event.data === 0) {          
        alert('done');
    }
}

Side note: You'll need to include the Youtube API before this script in order for it to work.

<script src="http://www.youtube.com/player_api"></script>

Working code pen - http://codepen.io/rr1000/pen/vEyNLj

edited Dec 31 '14 at 19:10

answered Dec 31 '14 at 19:03

Ryan Rich

11,637
8
22
31

score 0 · Answer 2 · answered Dec 31 '14 at 18:54

0

Take a look at this. Check if player.getPlayerState()==0, which indicates that it ended.

answered Dec 31 '14 at 18:54

Shahar

1,687
2
12
18

How to add a function to execute when a YouTube video is done playing?

2 Answers2