iframe player youtube onfinish event

How to Use the onfinish Event with an iFrame YouTube Player

If you want to add a YouTube video to your website, you can use an iFrame player. The player provides an easy way to embed videos on your website without worrying about the technical details. However, if you want to customize the player's behavior, you need to use JavaScript. In this article, we will show you how to use the onfinish event with an iFrame YouTube player.

Step 1: Add the iFrame Player to Your Website

The first step is to add the iFrame player to your website. You can get the code from the YouTube website. Here is an example:

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

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID'
    });
  }
</script>

You need to replace "VIDEO_ID" with the ID of the YouTube video you want to play.

Step 2: Define the onfinish Event

The next step is to define the onfinish event. This event is triggered when the video ends. Here is an example:

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

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // Your code goes here
    }
  }
</script>

In this example, we added the "events" property to the player object and defined the "onStateChange" event. We also defined the "onPlayerStateChange" function, which is called when the state of the player changes. If the state is "ENDED," we can execute our code.

Step 3: Add Your Code

Finally, you can add your code to the "onPlayerStateChange" function. Here is an example:

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

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // Your code goes here
      console.log('Video ended');
    }
  }
</script>

In this example, we added a simple console.log statement to the "onPlayerStateChange" function. You can replace this with your own code. For example, you can display a message, hide the player, or redirect the user to another page.

Alternative Method: Use the YouTube Iframe API

If you want more control over the player, you can use the YouTube iFrame API. This API allows you to interact with the player through JavaScript. Here is an example:

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

<script>
  function onYouTubeIframeAPIReady() {
    var player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID'
    });

    player.addEventListener('onStateChange', function(event) {
      if (event.data == YT.PlayerState.ENDED) {
        // Your code goes here
        console.log('Video ended');
      }
    });
  }
</script>

<script src="https://www.youtube.com/iframe_api"></script>

In this example, we used the "addEventListener" method to listen for the "onStateChange" event. When the event is triggered and the state is "ENDED," we can execute our code.

Conclusion

Using the onfinish event with an iFrame YouTube player is easy. You just need to add the event listener and define your code. If you want more control over the player, you can use the YouTube iFrame API. With this API, you can interact with the player through JavaScript and customize its behavior.