Youtube Player API比网站加载慢

Question

我有一个网站，它有一个包含大量文本的索引页面和一个触发模态窗口的按钮，您可以在其中看到一个YouTube视频。在正常情况下(人们读取页面的文本，然后实现按钮，他们点击按钮)没有问题，但当我点击按钮后，我的页面加载(或在.)模态窗口会出现，但里面没有视频，当然，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

也许是这样的(对不起，它似乎不能在堆栈溢出的片段iframe中工作-您可以尝试使用jsfiddle来代替：https://jsfiddle.net/hzmdj2m6/)？

​

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>

​

或者使用排队：Functions