はじめに

動画を背景に設定したいと要望をいただく機会がありました。
つまずきと学んだこと、備忘録にて残したいと思います。

要望内容

• レスポンシブサイトである
• 背景に動画を入れたい（PC/SP両方）
• 動画再生方法の要望は特になし
• 推奨環境はわりと新しめ（IE11以上、他最新。IEはよ消えてくれ）

動画再生方法の採用について

結論から言うと、YouTubeのAPIを採用しました。

HTML5 videoタグによる再生方法を採用しなかった理由

• 支給される動画データがどのようなデータでくるか、不安が大きい
  
• videoタグはiPhoneのSafariで自動再生されない

支給される動画データについて、mp4でご用意ください～、縦横比気を付けてください～、データ容量も抑えてください～とか言うのって大変ですよね。熟知されてる方なら心配はないのですが

空けてびっくり玉手箱！想像を超えるデータが支給されるときがある。
.webmデータだったんだけど
縦横比やばい！横が短くて縦がめっちゃ長いんだけど
容量重すぎるんだけど

こうなってしまった場合は、再度こちらで動画をエンコードする作業が発生してしまいます

こちらで動画を編集するとなると、やれ画素数が落ちて粗くなった、やれ表示サイズがおかしくなったなどなど、もう動画編集だけで延々と続く泥沼のやり取りが始ってしまいます。
支給されたデータをお客さまの理想に近づける作業は大変なのです
発注側も作業側もかなり疲弊した黒歴史がありました。

• videoタグはiPhoneのSafariで自動再生されない

こちらは、ミュート設定やjsを使うことでなんとか自動再生できるようになるみたいです。が、それなりの設定がいろいろと必要になります。

ということで、HTML5 videopタグを使っての実装は、やってやれないことはないけれど…工数がかかるよということを、伝えられたらなと思います。

YouTubeの採用理由について

• こちらで動画を再度編集する必要なく、安定した動画をすぐに制作へ投入できる

YouTubeへ動画をアップロード自体も手軽です。お客さまに依頼しやすいですよね。しかも、お客さまの方で見ているYouTube動画をそのままhtmlに設置できるので、お客さまが想定している動画とのギャップが発生しずらいのも嬉しいポイントです！

あと、なんかざっくり言ってしまうと、YouTubeの機能でなんかいろいろ良しなにやってくれるじゃないですか。動画の痒い所に手が届く的な（回線が遅い環境では画素数を落として再生してくれるとか）。動画はプロに任せるのが一番ですね！

ちなみに、YouTubeの埋め込みiframeを使用できなかった理由

『SPで自動再生できなかったから』

YouTubeリファレンスに、Apple のドキュメントの抜粋がありました。

「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」

標準では、あえて自動再生できないようにしているようです。
YouTube APIを使うことで無理やり？モバイルでも再生させることが可能なようなので、APIを採用する運びとなりました。

YouTube APIの記述内容

やっと実際のコードの話になります。
YouTubeリファレンスでわかりやすく説明があるので、こちらを見ていただければ問題なく設定できると思います。

• YouTubeが自動で再生される
• リピート再生される
• モバイルでも同様に再生される

これらの条件を、以下の記述で実装しました。

<!-- 1. 以下の<div>タグが <iframe>タグに置換されて再生されます。 -->
<div id="js-main-movie"></div>

<script>
  //2.このコードは、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);

  //3.この関数は、APIコードのダウンロード後、iframe（およびYouTubeプレーヤー）を作成するそうです。
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('js-main-movie（1.で設定した空divのID名）', {
      height: '360',
      width: '640',
      videoId: 'w7VNjGuSK_k', //表示させたいYouTubeの動画ID
      playerVars: {
          controls: 0,
          autoplay: 1,
          disablekb: 1,
          enablejsapi: 1,
          iv_load_policy: 3,
          playsinline: 1,
          rel: 0
      },
      events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
      }
    });
  }

  //4.ビデオプレーヤーの準備ができると、APIはこの関数を呼び出すそうです。  
  function onPlayerReady(event) {
    event.target.mute(); //muteにしないとモバイルで自動再生されない
    event.target.playVideo();
  }

  //5.プレーヤーの状態が変化すると、APIはこの関数を呼び出すそうです。
  //  プレイヤーの終了のタイミングで再度、動画再生をしています。
  function onPlayerStateChange(event) {
    var ytStatus = event.target.getPlayerState();
    if (ytStatus == YT.PlayerState.ENDED) {
      player.mute(); //muteにしないとモバイルで自動再生されない
      player.playVideo();
    }
  }
</script>

★モバイルの自動再生には、バージョンの条件があります。

playerVarsオブジェクトの設定は、YouTubeリファレンスにあります、プレーヤーのパラメータで確認ができます。

ポイント
playsinlineを1にすることで、iOSでインライン再生することが可能になりました。
loop設定もありますが、スマホで効かない… onPlayerStateChangeで再度再生させる必要があるとのことでした。

実際のテスト

See the Pen 背景にYouTubeを設定する by yoshie sato (@yoshie84235) on CodePen.