YouTube API onPlayerReadyが決して呼び出されない

Question

this tutorialに従うと、YouTube APIを自分のウェブサイトに統合しようとしています。具体的には、ボタンを押すとYouTubeでフルスクリーンモードでホストされているビデオを再生したいと考えています。残念ながら、私はそのチュートリアルで与えられたコードを動作させることさえできません。チュートリアルでは、私はその後、私のマークアップの終わりに、このJavaScriptを追加

.body 
    .player 

示唆するように、私はマークアップのためにスリムを使用してい

はので、私は、プレイヤーのIDと空のdivを追加

$(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 

私は100％Slimに精通していないので、これを別の方法でマークする必要があります。