YouTube Player API で埋め込んだ動画の関連動画を非表示にしよう。

以前 、YouTube Player API をつかってサイトに動画を埋め込む方法を紹介しました。
以前というか、このブログの1つ目のポストですね。なんだかしみじみしてしまいます。

このときの埋め込み方だと動画再生後に、

こんな感じで関連動画が表示されてしまいます。
今回はそれを消してみましょう。

html

<div id="player"></div>
<script>  
    // iframeAPIの準備ができたときに実行されるコールバック関数
    function onYouTubeIframeAPIReady() {
        new YT.Player("player", {
            width   : "320",         // プレイヤーの幅
            height  : "195",         // プレイヤーの高さ
            videoId : "1g0ebPju_eE", // 再生するビデオのID
            playerVars: {
                rel      : 0, // 関連動画非表示
                showinfo : 0, // 動画情報非表示
                controls : 0  // コントローラー非表示
            }
        });
    }
</script>

<!--iframeAPIを読み込み-->
<script src="https://www.youtube.com/iframe_api">

解説

いかがでしょう。
関連動画はおろか、動画情報、コントローラーも消し去ってみました。巻き添えです。
※ 当然関連動画のみを非表示にすることもできます。

ポイントは、YT.Player を newするときの第2引数 で渡しているオブジェクトです。
playerVersというキーに対して、表示非表示を管理する感じのオブジェクトを渡しています。

playerVars: {
    rel      : 0, // 関連動画非表示
    showinfo : 0, // 動画情報非表示
    controls : 0  // コントローラー非表示
}

それぞれ、0だと非表示、1だと表示になり、デフォルトでは1が設定されています。
なので、非表示にしたい要素がある際は0を渡すようにしましょう。