Escribo esto después de pasar el día anterior probando todas las soluciones que he encontrado sin éxito (Algunas soluciones tienen más de siete años).

El verdadero problema es lograr que el estado del video detenga el cambio de diapositiva en un control deslizante.

Así que reduje el problema usando el ejemplo de la documentación para saber qué estoy haciendo mal.

No estoy usando un div vacío sino el iframe.

En el ejemplo, el video debería reproducirse en onPlayerReady, pero no lo hace.

Espero que puedas ayudarme. Gracias.

La documentación de la API: https://developers.google.com/youtube/iframe_api_reference

El código ( 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(); }