Webサイトの背景にYouTube動画を再生する方法とSafariでの注意点

背景にYouTube動画再生
背景にYouTube動画を再生する方法
HTMLとCSSについて
Safariではサウンドありだと動作しない

背景にYouTube動画再生

Webサイトを見ていると背景に動画が流れていることがある。

動画はファイルサイズが大きいので表示しているWebサイトのサーバーには保存せずにYouTubeにアップして、それを背景に再生させているWebサイトもある。

例）【公式】横浜天然温泉SPA EAS

以降は横浜天然温泉SPA EASの動画を元に解説。

背景にYouTube動画を再生する方法

背景にYouTube動画を再生されるには、まず再生したい動画を非公開設定以外でYouTubeにアップロードする。

動画のURLのv=kL02uyDo2M4の値がvideoIdなのでメモしておこう。

アップロードしたらJavaScriptで読み込む。

var ua = navigator.userAgent;
var isPC = !/Android|iPhone|iPad|iPod/.test(ua);
var winWidth = window.innerWidth;

if (isPC && winWidth > 1165) {
  // YouTube動画のID
  var videoId = 'kL02uyDo2M4';

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(tag, script);
  var videoBg = document.getElementById('videoBg');

  function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player('videoBg', {
      videoId: videoId,
      playerVars: {
        rel: 0,
        controls: 0,
        showinfo: 0,
        modestbranding: 1,
        iv_load_policy: 3
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function playAndMute() {
    ytPlayer.playVideo();
    ytPlayer.mute();
  }

  function onPlayerReady() {
    playAndMute();
  }

  function onPlayerStateChange(e) {
    var status = e.target.getPlayerState();
    if (status === YT.PlayerState.ENDED) {
      playAndMute();
    }
  }

  function setSize() {
    videoBg.style.width = '100%';
    videoBg.style.height = winWidth + 'px';
    videoBg.style.marginTop = -winWidth / 2 + 'px';
    videoBg.style.marginLeft = '0';
    videoBg.style.top = '50%';
    videoBg.style.left = '0';
  }

  window.addEventListener('DOMContentLoaded', function() {
    setSize();
  });
}

YouTube動画はplayerVarsオプションでロゴなどの非表示設定を行っても、再生から約3秒間は表示されるので注意。

動画再生はPC以外だと重めの処理でパケットの消費量も多いのでPCのみ表示するよう条件分岐したほうが良い。

HTMLとCSSについて

HTMLとCSSは下記の通りvideoBgに動画を表示するのだが、そのままだとクリックできてしまうのでvideoBgLayerを上に配置してクリック不可にする。

videoBgLayerにbackground: rgba(0, 0, 0, 0.5);を指定すれば動画を少し暗くすることもできる。

動画はある程度の大きさの表示領域がないと上下が黒で塗りつぶされるのをなるべく避けるため@media screen and (max-width: 1165px)で1165px以下の場合は動画は非表示にしている。

動画を非表示にした際は代替の背景画像を表示すると良いだろう。

ちなみに処理を減らすため、サンプルコードではresizeイベントによる幅の監視は行っていない。

YouTube動画背景再生サンプル

<div id="content">サンプル</div>
<div id="videoBgLayer"></div>
<div id="videoBg"></div>

#content {
  width: 300px;
  height: 200px;
  margin: 100px auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
}
#videoBgLayer {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}
#videoBg {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: -2;
}
@media screen and (max-width: 1165px) {
  #videoBg {
    display: none;
  }
}