Webページの背景に動画ファイルを埋め込む方法

今回はWebサイトの背景に動画を埋め込んで、キーヴィジュアルにする方法を紹介します。

html5で登場したvideo要素を使用することによって、ユーザー環境側のFlashの設定に左右されず動画を再生することができます。

video要素に使用される代表的な属性一覧

動画は静止画と異なり、backgroundプロパティに動画ファイルを指定することはできないため、ちょっとした工夫が必要になります。

今回は3つの例をサンプルとしてあげていきます。

1.Video要素のwidthを100％にしてブラウザ幅で伸縮する

HTML

<div class="video-container">
  <video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
  <div class="video-sidebar">
    <h1>Title</h1>
    <p>This video is sample.</p>
  </div>
</div>

CSS

.video-container {
  position: relative;
}

.video-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); 
}

video {
  width: 100%;
}

DEMO

ブラウザの幅に合わせて等比率で動画が伸縮します。
動画の全体を見せることができますが、フルスクリーン背景にはなりません。

2.video要素を親として、その中に要素を子として自由配置していく

HTML

<div class="video-container">
  <video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
  <div class="sidebar">
    <h1>Title</h1>
    <p>This video is sample.</p>
  </div>
</div>

CSS

.video-container{
  position: relative;
  overflow-x: hidden;
}

.sidebar{
  position: absolute;
  top: 0;  
  left: 0;
  width: 30%;
  height: 100%;
  background-color: rgba(255,255,255,0.8); 
}

DEMO

video要素をposition:relativeの親として、そのブロック内にposition:absoluteで子要素を自由配置していく方法です。

動画の幅がはみ出て横にスクロールしないようoverflow-xではみでた要素を隠しています。

ブラウザの幅関係なくフルスクリーンになりますが、子要素が親要素である動画の高さを超えてしまうと下にはみ出てしまいます。

3.videoタグをbodyの閉じタグの直前に配置してその上に要素を乗せていく書き方

HTML

<div class="sidebar">
  <h1>Title</h1>
  <p>This video is sample.</p>
</div>
<div class="video-container">
  <video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
</div>

CSS

.video-container{
  position: fixed;
  top: 0;
  bottom:0
  width: 100%;
  height: 100%;
  z-index: -9999;
}

.sidebar{
  position: fixed;
  width: 30%;
  height: 100%;
  background-color:rgba(255,255,255,0.8);
}

DEMO

HTMLの最も下にvideo要素を設置してz-indexで重なり順を最下層に指定し、positionで固定します。
あとはこのvideo要素より上にHTML要素を設置していく方法です。

フルスクリーン表示できますが、ブラウザの高さ以上の要素を配置するとスクロールできないので見えなくなってしまいます。高さを%表示で指定したりする工夫が必要です。

以上が動画を背景に埋め込む方法になります。
レイアウトやコンテンツによって最適な方法を使い分けていくといいでしょう。

最近ではWebページに動画を掲載する際には、youtubeなどの動画共有サービスにアップロードしてAPIを利用してタグを埋め込むのが主流ですが、直接動画を埋め込むテクニックも１つの方法だと思いますので是非活用していきましょう。