javascript - 別のJSファイルからYouTubeビデオをDiv要素にバインドする

Question

YouTube ビデオを PhoneJS シングルページ モバイル アプリケーションに埋め込む際に、この問題が発生します。PhoneJS では、JS スクリプトは別のファイルで定義されます。そこで、HTML div を次のように定義しました。

<div id="player"></div>

今JSファイルで、私はこれをしました：

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

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player(playerDiv, {
            height: '250',
            width: '444',
            videoId: sIFYPQjYhv8               
        });
    }        
}

デバッガーを実行して表示すると、Youtube に呼び出しが行われ、応答が受信されますが、ビューに表示されません。

KnockoutJS バインディングを使用しているので、html ビューの div を次のように変更しました。

<iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: src }"></iframe>

そして、次のように src ビデオ ID を渡します。

src: ko.observable('http://www.youtube.com/embed/' + sIFYPQjYhv8 + '?autoplay=1')

ただし、この場合、デバッガーでは、Youtube への呼び出しすら行われません。何も起こりません。実際、私は 2 番目の方法ではなく API 呼び出しを使用することを好みます。

最初のアプローチを機能させる方法について何か提案はありますか? API呼び出しを使用するということですか？

EDITビューに以下のコードを追加すると、ビデオが正常にストリーミングされることに言及したいだけです。

<h1>Video</h1>
        <div id="player"></div>
        <script>
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var playerDiv = document.getElementById('player');
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player(playerDiv, {
                    height: '250',
                    width: '444',
                    videoId: 'sIFYPQjYhv8'
                });
            }
        </script>