Probleme hinzufügen Youtube iFrame-Code in document.ready

Question

Ich möchte den Youtube iframe API-Code in meine $ (Dokument) .ready() -Funktion hinzufügen, aber wenn ich dies tun, scheint der Player nicht zu laden, wenn ich den Code außerhalb verschieben Das Dokument lädt den Player in Ordnung. Kann mir jemand irgendwelche Vorschläge machen, wie ich dieses Video erscheinen lassen kann, wenn es in der Funktion ist?

JS

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

    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'u1zgFlCw8Aw', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    function onPlayerReady() { 
     console.log('ready'); 
    } 

    function onPlayerStateChange() { 
     console.log('player changed'); 
    } 
}); 

Answer 1

Wenn Sie function onYouTubePlayerAPIReady() {...} ändern window.onYouTubePlayerAPIReady = function() {...} dann ist es möglich, Ihren YouTube iframe API-Rückruf innerhalb der $(document).ready() Funktion zu definieren, und möglicherweise in anderen Variablen aus dem $(document).ready() Umfang in Ihren Rückruf Rahmen zu ziehen.

Ich bin mir nicht sicher, dass es einen großen Vorteil dabei gibt, aber es ist eine Option, wenn Sie wirklich wollen.

Answer 2

Das Skript wird onYouTubePlayerAPIReady() rufen, wenn es geladen wird. Wenn Sie ... sagen wir ... diese Funktionen in Ihrem DOM-fähigen Wrapper "verstecken", sind sie nicht mehr für den Aufruf der YT-API verfügbar (außerhalb des Gültigkeitsbereichs).

Da Sie nicht direkt auf die YT-API-Skriptdatei zugreifen können, können Sie dieses Verhalten nicht ändern und imho, was Sie fragen, ist nicht möglich.