YouTube IFrame APIを使って動画を埋め込むメモ。

サイトの背景にYouTubeにアップロードした動画を流したいとかいう要望に出くわしたのでメモ。
共有のリンク先を素直にコピペしてもいいんだけど、コントロールバー要らないとかいろいろあるので、提供されているAPIを使おうっていう。
他にも探せばいろいろあるんだけど、公式が提供してくれてたら取り敢えずそれ使おうっていう感じで。ちなみにjQueryじゃないので、jQueryのファイルは要らないです。

公式ドキュメントはここ(日本語です)
参考 : iframe 組み込みの YouTube Player API リファレンス

使い方

いちばん簡単なやつ。
htmlファイルの<body>〜</body>内の動画を表示させたい部分に、以下のhtmlを記述。 (id名はなんでもいい)

<div id="sample"></div>

次に、</body>の直前に以下を記述(別に直前である必要はないんだけど、htmlファイルは上から順番に読み込まれていくので、いろいろと記述の多いjsファイルの記述は下の方に書いておくといい……と思う)

<script src="./sample.js"></script>

ファイル名はなんでもいいし、ファイルパスもjsファイルを置く場所に合わせて書き換える。

あとは全部このjsファイルの中に書いていくよ。

jsファイルの中身。

まず、APIを読み込む記述。公式ドキュメントにあるとおり、このままコピペでOK。

// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

その下に、YouTubeを表示させる記述。
4行目の/'sample/'の部分は、上で指定したid名と同じにする(しないと動かない)

// YouTubeの埋め込み
var player;
function onYouTubePlayerAPIReady() {
 player = new YT.Player('sample', {
  width: '100%',
  height: '1000',
  videoId: '8hL4jlYj78U'
 });
}

基本的にはこれ。横幅と高さのサイズ指定は、単位を省略するとpxとして解釈される。videoIdの代わりにPlaylistのパラメータにすることもできる。
パラメータ(playerVars{}で指定してる部分)とかいろいろ追加して、実際にはこんな感じ。

// YouTubeの埋め込み
var player;
function onYouTubePlayerAPIReady() {
 player = new YT.Player('sample', {
  width: '100%',
  height: '1000',
  videoId: '8hL4jlYj78U',
  playerVars: {
   autoplay: 1,
   controls: 0,
   loop: 1,
   modestbranding: 1,
   showinfo: 0,
   wmode: 'transparent'
  }
 });
}

最終的に実装したのが以下の形。
動画を幾つか放り込んだプレイリストを連続再生しました。音声はミュート。
ブラウザサイズに合わせて全画面で表示するように設定。
参考 : YouTubeの動画を背景に利用する(YouTube IFrame API)

// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YouTubeの埋め込み
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('sample', {
            playerVars: {
                listType: 'playlist',
                list: 'PL-xxxxxxx', // プレイリストのID
                controls: 0,
                autoplay: 1,
                loop: 1,
                modestbranding: 1,
                showinfo: 0,
                wmode: 'transparent'
            },
            events: {
                onReady: onPlayerReady
                //onStateChange: onPlayerStateChange
            }
    });
}

function onPlayerReady(event) {
    //event.target.playVideo();
    event.target.mute(); // 音声ミュート
}

// ブラウザサイズにあわせて全画面表示
function resizeMovie () {
    var $w = $(window),
    bw = 1200, //基準にする横幅
    bh = (bw/16) * 9, //基準にする高さ(16:9)
    w = $w.width(), //表示サイズ(幅)
    h = $w.height(), //表示サイズ(高さ)
    mw = w, //動画サイズ(幅)
    mh =  Math.round(bh * (mw/bw)); //動画サイズ(高さ)

    if ( mh < h ) { //動画の高さが表示サイズの高さより小さかったら
        mh = h; //表示サイズの高さに変更
        mw = Math.round(bw * (mh/bh)); //高さに合わせて横幅変更
    }

    $('#sample').css({
            width: mw,
            height: mh,
            marginTop: (h - mh)/2,
            marginLeft: (w - mw)/2
    });

}

resizeMovie();

$(window).resize(resizeMovie);

パラメータについてはここ。そのうちちゃんと整理してここにも書こうと思うよ。
参考 : YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

取り急ぎメモでした。