【一気に今っぽいサイトに】背景で動画を流す方法

サイトのメインビジュアルなどで、
背景に画像ではなく動画を使っているものもありますよね。

今回はHTMLとCSSで背景に動画を設定する方法についてまとめたいと思います。

クリックできる目次

HTML
CSS
おわりに

HTML

全体のHTML構造

全体のHTML構造はこんなかんじです。

今回は、ヒーローイメージの背景で動画を流し、
その上に文字のコンテンツも表示されているものを想定しています。

<section>
  <div class="contents-container">
    <h1>Company name</h1>
    <p>ここにコンテンツが入るよ</p>
  </div><!-- contents-container -->
  <div class="video-container">
    <video autoplay muted loop>
      <source src="videoファイルのパスを指定" type="video/mp4">
    </video>
  </div><!-- video-container -->
</section>

必要なHTMLタグは3種類

背景で動画を流すためには、必要なHTMLタグが3種類あります。

divタグ (videoの位置を調整するため)
videoタグ
sourceタグ

背景の動画の部分のHTMLを全体のHTMLから抜粋するとこんなかんじです。

<div class="video-container">
  <video autoplay muted loop>
    <source src="videoファイルのパスを指定" type="video/mp4">
  </video>
</div><!-- video-container -->

必要なタグの属性

1：videoタグに設定する属性

videoタグに設定する属性は下記の3つあります。

autoplay：自動再生させるため。
loop：動画を繰り返し再生させるため。
muted：音声を入れない場合、指定が必要になります。

MDN <video>：動画埋め込み要素

2：sourceタグに設定する属性

sourceタグに設定する属性は下記の2つがあります。

src：挿入する動画のデータ場所を指定します。
type：動画の種類を指定。video/mp4など

MDN <source>：メディアまたは動画のソース要素

CSS

CSSの全体像はこんなかんじです。

section {
  height: 80vh;
}

.video-container {
  /* ビデオの位置調整のために指定 */
  position: relative;

  width: 100%;
  height: 100%;
  /* ビデオが画面からはみ出ないようにする */
  overflow: hidden;
  /* オーバーレイをかける場合は指定する */
  background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}

.video-container video {
  position: absolute;
  /* ビデオの真ん中が表示されるようにする */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  min-width: 100%;
  min-height: 100%;
  /* 後ろにずらして文字が隠れないようにする */
  z-index: -1;
}

.contents-container {
  position: absolute;
  color: #fff;
  z-index: 1;
  /* 今回は適当に配置しています */
  padding: 20px 50px;
}

まずvideoタグを包む親要素(.video-container)にposition: relative、
videoタグにposition: absoluteを指定し、位置を調整できるようにします。

動画が画面からはみ出るのを防ぐために、
親要素の.video-containerにoverflow: hiddenで調整します。

動画が背景いっぱいに広がるよう、
videoタグにmin-height: 100%;とmin-width: 100%を指定します。

またvideoタグにtop: 0; left: 0; transform: translate(-50%, -50%)
を指定することで、動画の真ん中が表示されるようにできます。

背景の動画とコンテンツの文章との色のコントラストを保つため、
必要に応じオーバーレイなどを入れてデザインを調整します。

オーバーレイは.video-containerに指定し、
今回の例では黒の不透明度50%を設定しています。