Youtube iFrame APIが状態の変化を検出しないのはなぜですか？

Question

YT iFrameの状態変化を検出するためのコードを含むページを作成しました。プレイヤーはonReadyイベントを検出しますが、onStageChangeイベントは検出しません。

誰も私がここで行方不明を説明することはできますか？

https://codepen.io/anon/pen/LOZVoX?editors=1001

コード：

<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/CTFtOOh47oo?rel=0&amp;?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe> 

<script type="text/javascript"> 

    var tag = document.createElement('script'); 
    tag.id = 'yt-iframe'; 
    tag.src = 'https://www.youtube.com/iframe_api'; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    console.log('yt scripts loaded'); 
    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('yt-iframe', { 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 
    function onPlayerReady(event) { 
     console.log('video player ready'); 
    } 
    function onPlayerStateChange(event) { 
     console.log('state has changed'); 
     console.log(event.data); 
    } 
</script> 

Answer 1

あなたはあなたのコードに2つのミスを持っています。

まず、あなたのビデオのURLパラメータが正しくありません。

あなたのURLは なので、パラメータrelとamp;?enablejsapiを渡します。

リンクはhttp://www.youtube.com/embed/CTFtOOh47oo?enablejsapi=1で、パラメータはenablejsapiである必要があります。

あなたの2番目の間違いは、ytスクリプトのIDをiframeのIDと同じに設定することです。

ytスクリプトのIDをtag.id = 'yt-script';のように変更します。

https://codepen.io/anon/pen/yPJJbv?editors=0001