I write this after spending the day before trying all the solutions that I have found without success (Some solutions are more than seven years old).

The real problem is getting the state of the video to stop the slide change in a slider.

So I have narrowed down the problem using the example from the documentation to just know what I am doing wrong.

I am not using an empty div but the iframe.

In the example, the video should play in onPlayerReady, but it doesn't.

I hope you can help me. Thank you.

The API documentation: https://developers.google.com/youtube/iframe_api_reference

The code (https://jsfiddle.net/migrad/xa8vdyn1/5/):

HTML:

    <iframe id="player" width="100%" height="87%" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0&enabledjsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Javascript:

    var player;

var tag = document.createElement('script');

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

function onYouTubeIframeAPIReady() { 
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
function stopVideo() {
  player.stopVideo();
}