htmlにyoutube動画を埋め込んでランダム&リピート再生

はじめに

htmlにyoutubeの動画を埋めこんで連続再生する。
その場合は、YouTube Iframe APIを使う
YouTube IFrame API

使い方

htmlはこんな感じ。
playerWallが何故書かれているのかは後述
responsiveでPCの時だけ動画ハンドリングする。

<div id="playerWrapper" class="hidden-xs hidden-sm">
    <div id="player"></div>
    <div id="playerWall"></div>
</div>

cssはこんな感じ

/* playerの周り */
#playerWrapper {
    position: absolute;
    top: 0;
    left : 0;
    height: 100%;
    z-index: 101;
}
/* playerそのもの */
#player {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #fff;
    z-index: -999 !important;
    /* z-indexでもはまる */
}
/* playerの前に立ちはだかる壁 */
#playerWall {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #fff;
    z-index: 100;
}

そして問題のjs。
ちなみにYouTube Playerはデフォルトではz-indexを無視してくれます。
これはwmode : "transparent"というoptionをセットすることで回避できます。

あと、option系はhtmlに埋め込むのでcontrol系は非表示にするなどの工夫も必要。
今回はplaylistのランダム再生なのでplaylistにも動画一覧を用意。

// ムービーリストを用意
// YouTubeのIDを配列に入れておく。
// この場合、動画の尺は各々30秒で作成している前提。
var movieList   = ['ABCDEFGHIJK','abcdefghijk'];

function onYouTubeIframeAPIReady() {
    // iFrameが準備できたらビデオを再生
    playVideo();
}

function playVideo(){
    // どちらを再生するかはランダム決定
    rand        = Math.floor(Math.random() * movieList.length);
    movie       = movieList[rand];

    // playerの準備
    player = new YT.Player('player', {
        videoId: movie,
        playerVars: {
            controls: false,
            disablekb: true,
            showinfo: false,
            rel: false,
            enablejsapi: true,
            listType: 'playlist',
            cc_load_policy: false,
            wmode: 'transparent', //z-indexを有効にする
            loop: true,
            playlist: 'ABCDEFGHIJK,abcdefghijk'
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
    // z-indexには気をつけろ。
    $('iframe').css('z-index',-999);
}

function onPlayerReady(e) {
    e.target.playVideo();
}

function onPlayerStateChange(e){
    if(e.data == YT.PlayerState.PLAYING){
        // ビデオが再生されて1秒後に動画をフェードイン
        setTimeout(function(){
            $('#background #playerWall').fadeOut(1000);
        },1000);
        // 動画がもうすぐ終わる28秒のタイミングで動画をフェードアウト
        setTimeout(function(){
            $('#background #playerWall').fadeIn(1000);
        },28000);
    }else if(e.data == YT.PlayerState.ENDED){
        e.target.playVideo();
    }
}

YouTube動画をhtmlに埋め込むための注意点

YouTubeの場合は、ネットワーク状況が悪いと再生開始までに時間がかかる。
サイトの背景が白い場合再生開始までは黒い画面がサイト内に表示されてしまう。

解決策として考えたのが、再生開始や再生終了のイベントが取得できるので、playerそのものをfadeIn(), fadeOutさせて黒い画面を汚さないこと。
そのため、cssでは#player（playerのdivに割り当てられているid）をdisplay: none;にしてイベントで表示・非表示に成功！と思ったのもつかの間、IEで動かない。

IE対応

一つ一つの関数でconsole.logしながら調査してみると、結果的には推測となるがIEではdisplay: none;の要素でonPlayerReady()とかonStateChange()とかのイベントが受け取れないようだ。
そのため、playVideo()に進めず、待っても待っても動画が表示されない。

そこで、逆転の発想。
#playerの前面に白いdivを用意して、そのdivをfadeIn(), fadeOut()することでなんとか成功。

IE恐るべし。

実装したサイト

KAOCACHI研究所
※ PCのみ動画埋め込み。しかも縦の動画を使ってます。