Detect when YouTube Video ends

by Alvin Olavarrieta

HTML

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

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

<script type='text/javascript'>
  // Loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // create youtube player
  var player;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '405',
      width: '720',
      videoId: '0Bmhjf0rKe8',
      controls: 0,
      autoplay: 1,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // autoplay video
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // when video ends
  function onPlayerStateChange(event) {
    if (event.data === 0) {
      alert('video ended.');
    }
  }
</script>