YouTube IFRAME API具有现有IFRAME无法运行回调的API

Question

与：YouTube IFRAME API并不总是加载？

但不同的是，我正在通过说明加载YouTube脚本。注意，在我的来源中，iframe在加载顺序中的脚本块上方。我基于这些说明（下）。如果我在该页面上，则示例可以正常工作，但是当我将代码放在我的身上时似乎对我不起作用。我敢肯定，我缺少一些非常简单的东西，但我想念它。谢谢！

https://developers.google.com/youtube/iframe_api_reference#mobile_considerations

var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//Console shows this script is loading
var player;
function onYouTubeIframeAPIReady() {
    console.log("onYouTubeIframeAPIReady", arguments);   //This shows in console
    player = new YT.Player('js_youTubeFrame', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    console.log("onPlayerReady",event); //Never triggers
}
function onPlayerStateChange(event) {
    console.log("onPlayerStateChange", event);  //Never triggers
    if (event.data === YT.PlayerState.PLAYING) {
        console.log("YouTube Video is PLAYING!!");  //Never triggers
    }
}

<div id="js_youTubeContainer" class="embed-responsive embed-responsive-16by9">
  <iframe id="js_youTubeFrame" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/u3A7bmEOtaU?enablejsapi=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

通过他的API加载YouTube视频的最佳方法正在遵循此sintaxis：

<div id="video-youtube"></div>
<script id="youtube-tracking-script">
    var youtubeVideoId = 'u3A7bmEOtaU'; // replace with your own video id
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementById("youtube-tracking-script");
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var video;
    function onYouTubeIframeAPIReady() {
        video = new YT.Player('video-youtube', {
            height: '352',
            width: '100%',
            videoId: youtubeVideoId,
            playerVars: {rel: 0, showinfo: 0},
            events: {
                'onStateChange': videoPlay
            }
        });
    }
    function videoPlay(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            console.log("YouTube Video is PLAYING!!");
        }
         if (event.data == YT.PlayerState.PAUSED) {
            console.log("YouTube Video is PAUSED!!");
        }
        if (event.data == YT.PlayerState.ENDED) {
            console.log("YouTube Video is ENDING!!");
        }
    }
</script>

https://jsfiddle.net/t4qwfk0d/1/

Answer 2

您应该将<iframe> </iframe>替换为<div id= "js_youTubeFrame"> </div>，以我的情况有效。

我认为youtube iframe api需要该div才能在iframe上转换。