Javascript – YouTube API – iframe onStateChange events

javascriptyoutubeyoutube-api

I'm using the iframe YouTube API and I want to track events, for example, sending data to google analytics, when user start and stop video.

<iframe src="https://www.youtube.com/embed/DjB1OvEYMhY"></iframe>

I looked https://developers.google.com/youtube/iframe_api_reference?csw=1 and did not find an example how to do that. The example creates iframe and defines onReady and onStateChange as well. How would I do same when I've only iframe on page?

Best Answer

This example listens to every play/pause action the user makes, using onPlayerStateChange with its different states, and prints (records) them.

However, you need to create your own record function to do whatever you want with this data.

You also need an ID on your iframe (#player in this case) and to add ?enablejsapi=1 at the end of its URL. And of course, make sure to include the Youtube iframe API.

Note

It's important to declare the API after your code, because it calls onYouTubeIframeAPIReady when it's ready.

<!DOCTYPE html>
<html>
<body>
    <iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
    <h5>Record of user actions:</h5>
    <script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player( 'player', {
          events: { 'onStateChange': onPlayerStateChange }
        });
      }
      function onPlayerStateChange(event) {
        switch(event.data) {
          case 0:
            record('video ended');
            break;
          case 1:
            record('video playing from '+player.getCurrentTime());
            break;
          case 2:
            record('video paused at '+player.getCurrentTime());
        }
      }
      function record(str){
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(str));
        document.body.appendChild(p);
      }
    </script>
    <script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>

JS Fiddle Demo

Related Topic