YouTube API onPlayerReady 永远不会被调用

Question

关注this tutorial，我一直在尝试将 YouTube API 集成到我的网站中。具体来说，当按下按钮时，我想以全屏模式播放 YouTube 上托管的视频。不幸的是，我什至无法让该教程中给出的代码工作。

我正在使用 Slim 进行标记，所以我按照教程的建议添加了一个带有玩家 ID 的空 div

.body  
  .player

然后我在我的标记末尾添加了这个 javascript

  $(document).ready(
    function() {
      loadYoutubeAPI();
    });

哪个应该开始调用这些函数的链

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

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

function onPlayerReady(event) {
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}

function stopVideo() {
    player.stopVideo();
}

但是，调用链在 onPlayerReady 触发之前就停止了，我不知道为什么。

Answer 1

据我所见，您的问题似乎出在播放器 div 中，似乎是类播放器，从我在教程中看到的内容来看，它正在寻找一个带有播放器 ID 的 div。所以类似下面的东西可能会起作用：

.body
    #player

我对 Slim 不是 100% 熟悉，因此您可能需要以不同的方式对其进行标记。