Youtube iframe api no se activa enYouTubeIframeAPIReady

4 minutos de lectura

Youtube iframe api no se activa enYouTubeIframeAPIReady
jribeiro

He estado luchando con el iframe api de youtube desde hace bastante tiempo. De alguna manera el método onYouTubeIframeAPIReady no siempre se desencadena.

Por los síntomas parece un problema de carga. No se muestran errores en el inspector.

Aquí está mi código:

HTML

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

JS

(llamado al final de la página. Traté de colocar el código justo después del script anterior y el resultado fue el mismo).

var isReady = false
  , player
  , poster
  , video;

$(function () {
$('.js-play').click(function (e) {
    e.preventDefault();
    interval = setInterval(videoLoaded, 100);
  });
});
function onYouTubeIframeAPIReady() {
  console.log(videoId)
  player = new YT.Player('player', {
    height: '445',
    width: '810',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady//,
      //'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  isReady = true;
  console.log("youtube says play")
}

function videoLoaded (){
  if (isReady) {
      console.log("ready and play")
      poster.hide();
      video.show();

      $('body').trigger('fluidvideos');

      player.playVideo();
      clearInterval(interval);
  } 
}

El problema es que a veces nada se imprime por el console.log y no pasa nada

En los teléfonos móviles esto sucede todo el tiempo. ¿Algunas ideas?

  • Me imaginé que miró esta respuesta detenidamente en stackoverflow.com/questions/6857686/youtube-iframe-events

    – Shaun OReilly

    04 sep.

Youtube iframe api no se activa enYouTubeIframeAPIReady
bcm

No es un problema de tiempo de espera, y no debería necesitar activar esta función manualmente.

Asegúrese de que su onYouTubeIframeAPIReady La función está disponible a nivel global, no anidada (oculta) dentro de otra función.

  • Esta es la solución correcta, POR LEJOS. Tuve el mismo problema, pero mi función estaba en $(document).ready(). Lo saqué y funcionó.

    – Don Botas

    20 mar. 13 a las 19:38

  • ¿No hay un evento personalizado que podamos escuchar en lugar de hacer que la función esté disponible en el ámbito global? ¡Esto se siente muy sucio! Algo como $('document').on('youTubeIframeAPIReady', function(e){});

    – Agustín Riedinger

    09 feb.

  • @AugustinRiedinger, ¿encontró un evento adecuado para escuchar?

    – Ben Swinburne

    18 mayo, 2016 a las 13:35

  • No por ahora. Tal vez un script personalizado: window.onYouTubeIframeAPIReady = function() { document.dispatchEvent(new CustomEvent('onYouTubeIframeAPIReady', {})) })

    – Agustín Riedinger

    22 ago. 16 a las 20:50


Siempre puede agregarlo al objeto de la ventana para asegurarse de que se evoca globalmente. Esto es útil si su código usa amd.

window.onYouTubeIframeAPIReady = function() {}

  • Sé que es un viejo tema. Para cualquier otra persona que use requireJS, esta solución soluciona el problema.

    – DavidT

    29 ago. 14 a las 11:35

  • También me ayudó con Meteor y el paquete API de iframe de YouTube.

    –Kodie Grantham

    19 ago. 16 a las 15:17

  • Esta respuesta solucionó un problema para mí con la función onYouTubeIframeAPIReady que no se invocaba solo en Safari. La función ya estaba en el ámbito global y funcionaba bien en Firefox y Chrome. Anexarlo a la ventana solucionó el problema en Safari.

    – Yabsley

    31 mayo 2018 en 09:41

Si tiene que ingresar una función en el interior, una posible solución es en lugar de:

function onYouTubeIframeAPIReady() {
  // func body...
}

puedes declararlo así:

window.onYouTubeIframeAPIReady = function() {
  // func body...
}

En este caso, asegúrese de insertar el script determinado en el dom después de la declaración (el insertBefore() llame a lo que está en el alcance global ahora en su caso):

Youtube iframe api no se activa enYouTubeIframeAPIReady
Joar

Si carga el código API de IFrame Player de forma asíncrona de la siguiente manera:

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

y también está cargando el código del script de esta manera:

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

entonces la función onYouTubeIframeAPIReady no se llamará debido a que el mismo código se carga dos veces (la función se llama solo una vez cuando la API está completamente cargada).

Así que use solo una de las formas según sus necesidades.

Después de revisar esto, encontré una solución funcional para mí cuando uso el paquete web (o supongo que cualquier otro sistema de módulo commongJS), o si encuentra que la API de YouTube está lista antes de su propio archivo JS, fue usar un intervalo – hasta que YouTube proporcione algunos forma de devolución de llamada de promesa:

var checkYT = setInterval(function () {
    if(YT.loaded){
        //...setup video here using YT.Player()

        clearInterval(checkYT);
    }
}, 100);

Este parecía ser el más a prueba de errores en mi caso.

Youtube iframe api no se activa enYouTubeIframeAPIReady
Comunidad

Asegúrese de que está probando la página al publicarla en la web, no solo cargarla localmente. El comportamiento de la API iFrame de YouTube es incoherente/no determinista

Youtube iframe api no se activa enYouTubeIframeAPIReady
matt loye

De hecho, hice esto para cargar de forma diferida el reproductor de YouTube. Me parece a prueba de balas.

window.videoApiLoaded = [];
window.videoApiLoaded.youtube = false;

function loadYoutubeVideo(videoId) {

    window.onYouTubeIframeAPIReady = function() { document.dispatchEvent(new CustomEvent('onYouTubeIframeAPIReady', {})) };

    if(window.videoApiLoaded.youtube == false) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        window.videoApiLoaded.youtube = true;
    }

    var player;

    document.addEventListener('onYouTubeIframeAPIReady', function (e) {
        player = new YT.Player('player', {
          height: '400',
          width: '600',
          videoId: videoId,
          events: {
            'onStateChange': onYtStateChange
          }
        });

    }, false);

}

.

¿Ha sido útil esta solución?