Problemi nell'aggiungere il codice iframe di youtube all'interno del documento.ready

Question

Voglio aggiungere il codice api iframe di youtube nella mia funzione $ (document) .ready() ma quando lo faccio il giocatore sembra non caricare, quando sposto il codice all'esterno il documento. Già il giocatore carica bene. Qualcuno può offrirmi qualche suggerimento su come posso far apparire questo video quando si trova all'interno della funzione?

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

Se si cambia function onYouTubePlayerAPIReady() {...}-window.onYouTubePlayerAPIReady = function() {...} allora è possibile definire YouTube iframe API richiamata all'interno della funzione $(document).ready(), e potenzialmente tirare in altre variabili dal $(document).ready() ambito nel vostro ambito di callback.

Non sono sicuro che ci sia un gran vantaggio in questo, però, ma è un'opzione se lo si vuole davvero.

Answer 2

Lo script chiamerà onYouTubePlayerAPIReady() quando è caricato. Quando tu ... diciamo ... "nascondi" queste funzioni all'interno del tuo wrapper DOM ready non sono più disponibili per l'API YT da chiamare (fuori ambito).

Poiché non è possibile accedere direttamente al file di script dell'API di YT, non è possibile modificare questo comportamento e imho ciò che si chiede non è possibile.