YouTubePlayerを外部のJSファイルに切り出そう。

オールウェイズ。オールウェイズ。（たった。）

解説

以前 はHTMLにベタ書きだったYouTube Player埋め込みコードですが、今回は外部のJSファイルに切りだしてみました。

HTML

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

JavaScript

(function (win, doc) {

    var tag            = doc.createElement("script"),
        firstScriptTag = doc.getElementsByTagName("script")[0];
    
    tag.src = "https://www.youtube.com/iframe_api";
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    function onYouTubeIframeAPIReady() {
        new YT.Player("player", {
            width   : 640, // 動画幅
            height  : 390, // 動画高さ
            videoId : "CsCwl6rDOgU", // 動画ID
            events  : {
                onReady       : onPlayerReady,
                onStateChange : onPlayerStateChange
            },
            playerVars: {
                rel      : 0, // 関連動画非表示
                showinfo : 1, // 動画情報表示
                controls : 1  // コントローラー表示
            }
        });
    }
    
    function onPlayerReady(evt) { // 動画再生準備完了時イベント
        evt.target.playVideo(); // 動画再生
    }
    
    function onPlayerStateChange(evt) { // 動画再生状態変更時イベント
        if (evt.data === 0) { // 動画停止時
            evt.target.playVideo(); // 動画再生
        }
    }
    
    // export
    win.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    
})(this, document);

もうちょいとばかし解説

Youtube Player API をロードする

var tag            = doc.createElement("script"),
    firstScriptTag = doc.getElementsByTagName("script")[0];
    
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

ドキュメントの中からscriptタグを探してきて、その要素の前にscriptタグを挿入しています。
scriptタグが1つもないHTMLでは動作しませんが、このコードが実行されているということは、このコードを読み込んでいるscriptタグがあるはずなので問題ありません。

onYouTubeIframeAPIReady をグローバルから叩けるようにする

win.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

プレイヤーの準備ができた際のコールバックをグローバルから叩けるようにしています。

今回は以上です。

タイトルは関係ない。本文と関係ない。
マシマロも関係ない。本文と関係ない。

踵で愛を打ちならせ

マシマロ