YouTubeのAPI iframeがブラウザの更新時に表示されない

Question

次のスクリプトはうまく動作しますが、ブラウザを更新するとランダムな順序で動作し、iframe youtubeで生成された動画は表示されません（時には、ランダム）。 iframeは生成されず、マークアップには空のdivのみがあり、最終的にiframeに置き換えられます。動画は、私はどちらかのコンソールにエラーを得ることはありません表示されません場合は

<script src="https://www.youtube.com/iframe_api"></script> 

：

は、私は、スクリプトタグを使用したユーチューブのAPIをロードしています。

$(document).ready(function(){ 

    window.onYouTubePlayerAPIReady = function() { 
     var players = [], vids=[], player0, player1, player2; 

     for (var i = 0; i < document.querySelectorAll(".video-thumb__single").length; i++) { 
      players.push(document.querySelectorAll(".video-thumb__single")[i].dataset.videoId); 
     } 

     player0 = new YT.Player('player0', { 
      height: '200', 
      width: '400', 
      videoId: players[0], 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     vids.push(player0); 

     player1 = new YT.Player('player1', { 
      height: '200', 
      width: '400', 
      videoId: players[1], 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     vids.push(player1); 

     player2 = new YT.Player('player2', { 
      height: '200', 
      width: '400', 
      videoId: players[2], 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     vids.push(player2); 

     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.PLAYING) { 
       stopVideo(event.target.a.id); 
      } 
     } 

     function stopVideo(player_id) { 
      console.log(vids); 
      for (var i = 0; i < vids.length; i++) { 
       if (player_id != vids[i].a.id) 
       vids[i].stopVideo(); 
      } 
     } 

    } 

}); 

Answer 1

私は次のことをやってしまった：

window.onYouTubeIframeAPIReady = function() { 
     player0 = new YT.Player('player0', { 
      height: '390', 
      width: '640', 
      videoId: ids[0], 
      events: { 
       'onStateChange': onPlayerStateChange 
      } 
     }); 

     player1 = new YT.Player('player1', { 
      height: '390', 
      width: '640', 
      videoId: ids[1], 
      events: { 
       'onStateChange': onPlayerStateChange 
      } 
     }); 

     player2 = new YT.Player('player2', { 
      height: '390', 
      width: '640', 
      videoId: ids[2], 
      events: { 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

は、ウィンドウオブジェクトへの "onYouTubeIframeAPIReadyを" アタッシェしなければなりませんでした。このAPIは、関数が起動するにはグローバルスコープになければならないと述べています。これは私の問題を解決しましたが、私はまだそれが以前とどのように違うか理解していません。