How To Detect When A Youtube Video Finishes Playing

Imagine this scenario: you're watching a YouTube video, engrossed in the content, when suddenly it ends. Wouldn't it be cool if you could be notified when the video finishes playing? Well, you're in luck because, in this article, I am going to show you how to detect when a YouTube video finishes playing using JavaScript.

To achieve this, we will be using the YouTube IFrame Player API, which provides a way to control and interact with the YouTube video player. First, you'll need to include the YouTube IFrame Player API script in your HTML file by adding the following line within the `` section:

Next, you will need to create a YouTube player object. You can do this by initializing a new YT.Player object with the video ID and the player options. Make sure to replace 'YOUR_VIDEO_ID' with the actual ID of the YouTube video you want to track:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'YOUR_VIDEO_ID',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

In the above code snippet, we are creating a new YouTube player object and defining an event listener for the 'onStateChange' event. The `onPlayerStateChange` function will be called whenever the player's state changes, allowing us to detect when the video finishes playing.

Now, let's implement the `onPlayerStateChange` function to check if the video has ended:

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    // Video has ended
    console.log('Video has finished playing!');
    // You can add your custom code here to trigger any actions after the video finishes playing
  }
}

In the `onPlayerStateChange` function, we are checking if the player's state is `YT.PlayerState.ENDED`, which indicates that the video has finished playing. You can customize this function to perform any desired actions once the video finishes, such as displaying a message to the user or redirecting to another page.

To include the video player in your HTML file, you can add the following markup:

<div id="player"></div>

By following these steps, you can easily detect when a YouTube video finishes playing using JavaScript and the YouTube IFrame Player API. This feature can be useful for implementing interactive user experiences and tracking user engagement on your website. Give it a try and enhance your video playback functionality today!