最新情報 & コラム

最近、背景に動画を設定しているホームページが多くなりました。

ホームページ内に動画を入れるには【videoタグ】または【YouTube】を利用することが多いですが、今回はYouTubeの動画をホームページ内の背景として使う方法をご紹介します。

YouTubeを背景に設定する場合、APIを使用する方法またはJqueryを使用する方法があります。

YouTubeAPIを利用する方法

最初にYouTubeAPIを利用する方法をご紹介します。

YouTubeリファレンスにならって手順を説明していきたいと思います。

1.HTML

まずHTMLです。動画を入れたい場所に下記のコードを書きます。

divタグを２つ用意しましたが動画となるのはyt_playerのidがついたほうになります。今回背景に動画を使用するので、動画を触れないようにoverlayというクラス名をつけたdivも用意し、フィルターのような役割を持たせています。

<div class="overlay"></div>
<div id="yt_player"></div>

2.CSS

次にCSSです。

.overlay, #yt_player {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.overlay{
    z-index: -1;
}

#yt_player{
    z-index: -2;
}

playerとoverlayのdivタグは同じCSSを適用し、z-indexで前後関係を調整します。動画になる#yt_playerが下になることでユーザーは動画に触れなくなります。

3.JavaScript

最後にscriptです。一見量が多いですが、リファレンスのものをベースに少し変更している程度なので、コードの中身や意味はざっくりわかればOKです。今回はリファレンス内の動画を利用します。

YouTube APIはJQuery本体の読み込みは必要ないのですが、このあと行う上下左右の黒帯を消すためのスクリプトでJQueryを使っているので、JQuery本体を読み込んでおいてください。

そのあと以下のコードをhtmlファイルまたはjsファイルにコピペしてください。(jsファイルに記述する場合はscriptタグは外す)

<script>
     // YouTube 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);

      //iframe player APIコードを非同期で読み込みます。
      var player;

      function onYouTubeIframeAPIReady() {
          //動画を埋め込む場所を指定(1.のidを入れる)
          player = new YT.Player('yt_player', {
              //YouTUbeの動画IDを入れる
              videoId: 'z4pWvWYcb_I',
              //オプションを設定する場所
              playerVars: {
                  playsinline: 1,
                  loop: 1,
                  listType: 'playlist',
                  playlist: 'z4pWvWYcb_I', //上と同じ動画ID_リピートするには入力必須
                  rel: 0, // 関連動画の非表示
                  controls: 0, // 動画プレーヤーのコントロール非表示
              },

              events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
              }
          });
      }

      //プレーヤの準備完了後に呼び出す関数
      function onPlayerReady(event) {
          event.target.mute(); //ミュートにしないとスマホで再生されない
          event.target.playVideo(); //ビデオを再生
      }
      var done = false;

      function onPlayerStateChange(event) {
          var ytStatus = event.target.getPlayerState();
          if (ytStatus == YT.PlayerState.ENDED) {
              event.target.mute(); //ミュートにしないとスマホで再生されない
              event.target.playVideo(); //ビデオを再生
          }
      }
    </script>

playerVarsの中身にオプションを書くことで、動画プレーヤーのコントロールを非表示にしたり、ループを設定したりすることができます。今回使用している以外にもオプションはたくさんありますので、公式リファレンスを確認してみてください。

4.動画の上下左右の余白を消す

３．までの工程で動画は表示されましたが、実際にブラウザ上で動画を確認してみると、ウィンドウ幅を変更した際に、16:9の画面比率を保つために上下や左右に黒い余白ができてしまいます。この黒い帯がでないようにウインドウサイズに合わせて動画サイズを調整します。

下記のコードをjsファイルの中の先ほどのコードの下に追記してください。idの部分はiframeを入れた場所と同じidを入れてください。

// 上下左右に出てくる黒帯を非表示
      var $WIN = $(window); // ブラウザのウインドウを取得する

      function screen_fit () {
          // 上下左右の縦横比を調節する関数
          const WIN_H = $WIN.height(); // windowの高さを取得
          const WIN_W = $WIN.width(); // windowの幅を取得
          const screen_switch = 0.5625; // youtubeの縦横比16:9=>9/16した値
          const screen_ratio = WIN_H / WIN_W; // windowの高さの値/windowの幅の値
          const ratio_H = WIN_H / screen_switch; // windowの高さ/縦横比の値
          const ratio_W = WIN_W * screen_switch; // windowの幅*縦横比の値

          if (screen_ratio > screen_switch) {
              // windowの高さの値/windowの幅の値>youtubeの縦横比16:9=>9/16した値
              $("#yt_player").css({　//動画を入れる場所のid名入れる
                  height: "100%",
                  width: ratio_H,
                  "margin-top": "0",
                  "margin-left": -ratio_H / 2,
                  left: "50%",
                  top: "0"
              });
          } else {
              $("#yt_player").css({　//APIの場所のid名入れる
                  width: "100%",
                  height: ratio_W,
                  "margin-top": -ratio_W / 2,
                  "margin-left": "0",
                  top: "50%",
                  left: "0"
              });
          }
      }

      $WIN.on("resize", function () {
         screen_fit();
      });

      $(function () {
          screen_fit ();
      });

これでyoutubeの動画を全画面表示にすることができました。

しかし、上記の方法だと「height:500px」というように高さを指定して使用するときには余白が出てしまいます。

高さを指定して背景に動画を使いたい場合はJQueryプラグインを使うと簡単に実装することができます。

jQueryプラグイン「jquery.mb.YTPlayer」

YouTubeのAPIでも動画を背景に設定できますが、このJQueryプラグイン「JQuery.mb.YTPlayer」を使うととっても簡単に動画を背景にすることができます。

1.「jquery.mb.YTPlayer」のダウンロード

https://github.com/pupunzi/jquery.mb.YTPlayer

GitHubで上記URLから本体をダウンロードすることができます。リンク先に飛んだら右の「Clone or download」と書かれた緑のボタンを押して「Download ZIP」からZIPファイルをダウンロードしてください。

2.ファイルの読み込み

そのファイルをhtml内で読み込みます。この時にJQuery本体の読み込みも忘れないようにしましょう。

3.HTML

読み込みが完了したらHTMLにコードを書いていきます。idは任意のもので大丈夫です。

<div id="ytPlayerWrap">
  <div id="ytPlayer" data-property="{
      videoURL: 'z4pWvWYcb_I',　//動画IDまたはURLを記述
      containment: '#ytPlayerWrap', //動画の位置(親要素)
      autoPlay: true, //自動再生
      loop: 1,　//ループ再生
      mute: true, //
      startAt: 0, //動画の再生位置
      showControls: false, //コントロールの非表示
      showYTLogo: false //youtubeのロゴ等を非表示
  }"></div>
</div>

4.ＣＳＳ

動画を囲っている親要素に高さと幅を指定してあげます。この３つの入力がどれか１つでも欠けてると何も表示されないので注意してください。

#ytPlayerWrap{
  position: relative;
  height: 500px;
  width: 100%;
}

5.JavaScript

HTMLでオプションを設定するのでJSは実行の1行を書いてあげればOKです。

$("#ytPlayer").YTPlayer();

これで完成です。指定した領域に動画をbackground:coverのように表示することができます。

Iframeの埋め込みじゃダメなの？

YouTubeの【共有】-【動画の埋め込み】で表示されるIframeのコードを貼り付けて設定できれば1番簡単なのですが、この方法だとスマホでの自動再生が行われません。

YouTubeリファレンスの中にAppleのドキュメントの抜粋があり、下記のような記載があります。

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

このような制限がある為、スマホでも背景に動画を設定させたい場合はAPIもしくはJQueryプラグインを使うのがベストです。