YouTubeのプレーヤーAPIはウェブサイトの負荷よりも遅い

Question

私は多くのテキストを持つインデックスページとモーダルウィンドウをトリガーするボタンを持つウェブサイトを持っています。通常のシナリオでは（ページのテキストを読んでボタンをクリックするとボタンが表示されます）、問題はありませんが、ページがロードされた直後（または...）にボタンをクリックするとモーダルウィンドウが表示されますその中にビデオはありません。もちろん、FireBugは、ビデオがまだロードされていないというエラーを投げます。

ボタンを押した後にビデオが読み込まれるのを待っていますが、ボタンを押して100％の時間をビデオで見ていますが、Apiの読み込みを開始する方法がわかりません私が欲しい瞬間。そこにいくつかの関連するコードがあります：

var player; 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player("player", { 
     height: $('#modalvideo').height()*0.9, 
     width: $('#modalvideo').width()*0.9, 
     videoId: "NeeTGjp5-Ag" 
    }) 
} 

$(document).ready(function() { 
    $(".youtube").on("click", function(e) { 
     e.preventDefault(); 
     // THIS IS THE PLACE WHERE I WOULD WANT TO LOAD THE YOUTUBE API, EVEN IF I HAVE TO WAIT 
     $("#modalvideo").modal("show"); 
     player.playVideo(); 
    }); 
}); 

ありがとう皆さん！

Answer 1

何かこれは多分（申し訳ありませんが、stackoverflowのスニペットiframe内で動作するようには見えません - 代わりにjsfiddleを試すことができます：​​）？

var player; 
 
var playWhenReady = false; 
 

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

 
function onYouTubeIframeAPIReady() { 
 
    console.log('API is ready'); 
 
    player = new YT.Player("player", { 
 
    height: $('#modalvideo').height() * 0.9, 
 
    width: $('#modalvideo').width() * 0.9, 
 
    videoId: "NeeTGjp5-Ag", 
 
    playerVars: { 
 
     origin: 'http://stacksnippets.net' 
 
    }, 
 
    events: { 
 
     onReady: onYouTubePlayerReady 
 
    } 
 
    }) 
 
} 
 

 
function onYouTubePlayerReady(e) { 
 
    console.log('Player is ready'); 
 
    player.isReady = true; 
 
    if (playWhenReady) { 
 
    playVideo(); 
 
    } 
 
} 
 

 
function playVideo() { 
 
    console.log('playVideo'); 
 
    if (player && player.playVideo) { 
 
    console.log('now'); 
 
    //$("#modalvideo").modal("show"); 
 
    player.playVideo(); 
 
    return; 
 
    } else { 
 
    console.log('postpone'); 
 
    playWhenReady = true; 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $(".youtube").on("click", function(e) { 
 
    e.preventDefault(); 
 
    playVideo(); 
 
    }); 
 
});

#modalvideo { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="youtube">play</a> 
 
<div id="modalvideo"> 
 
    <div id="player"></div> 
 
</div>

またはキューイングを使用します。https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions