Detect when a YouTube video ends up not working

Asked Jul 18 '20 at 23:28

Active Jul 18 '20 at 23:38

Viewed 18 times

I'm trying to detect when a YouTube video ends but the code below just doesn't work.

This is my code:

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() {
  // first video
  player = new YT.Player('player', {
    height: '270',
    width: '480',
    videoId: 'UDxzMcCrOyI',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    alert('player stopped');
  }
}

<iframe id="player" width="480" height="270" src="https://www.youtube.com/embed/UDxzMcCrOyI?enablejsapi=1" frameborder="0" allowfullscreen />

edited Jul 18 '20 at 23:38

evolutionxbox

3,932
6
34
51

asked Jul 18 '20 at 23:28

Zerply

`onYouTubeIframeAPIReady` is async. You can't assign it to `player` like that. – evolutionxbox Jul 18 '20 at 23:30
@evolutionxbox I don't know how to do it, can you help me? – Zerply Jul 18 '20 at 23:34
Odd. You're copying there example... May you make sure the example you've given is a [mcve] of the problem you're seeing? – evolutionxbox Jul 18 '20 at 23:37
Consider not using an iframe? Their examples use a standard `div` instead. – evolutionxbox Jul 18 '20 at 23:45

Detect when a YouTube video ends up not working

0 Answers0