Written by Kasumi

【簡単CSS】videoタグを使って動画を背景に設定する方法

メインヴィジュアルなどにvideoタグを使って背景に動画を流したい。

動画を設置したらレスポンシブに可変するようにしたい。

動画の上に薄いレイヤーを載せて少し暗く見せたい。

本記事ではCSSを使ってこのような悩みを解決します。

実装例

See the Pen
mp4動画背景
by Kohei (@kouk05)
on CodePen.0

videoタグを使って動画を背景設定した実装例です。

動画の上に薄いレイヤー背景とテキストがpositionで設定されてます。

導入方法は次章より説明します。

HTML

<div class="mv">
  <!--  メイン全体を囲うdiv  -->
  <div class="mv-wrap">
    <!--   薄いレイヤー   -->
    <div class="mv-bg"></div>
    <!--   videoタグ   -->
    <video id="video" webkit-playsinline="" playsinline="" muted="" autoplay="" loop=""
      src="http://kasumiblog.xsrv.jp/codepen/video/video.mp4"></video>
    <!--   動画の上に載せるテキスト   -->
    <p class="mv-txt">kasumiblog</p>
  </div>
</div>

背景動画を入れるためのHTMLの構成例です。

必要なのが全体を囲うdiv要素、薄いレイヤーを乗せる要素、動画を入れるvideoタグ、動画の上に載せたいテキスト・画像要素です。

これら要素にCSSを当てます。

CSS

/* ここから */
.mv {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* 全体を囲う要素 */
.mv-wrap {
  position: relative;
  /* 背景画像の高さ */
  height: 500px;
}

video {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 500px;
  /* 高さを維持したまま全体を表示させる */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.mv-bg {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  /* 薄いレイヤーの色 */
  background-color: rgba(0, 30, 0, 0.2);
  /* videoの上に乗せる */
  z-index: 2;
}

.mv-txt {
  color: #fff;
  font-size: 50px;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* レイヤー背景の上に乗せる */
  z-index: 3;
  margin: auto;
  text-align: center;
}

上記cssを前章で構成したHTMLに当てる事で動画背景を作る事ができます。

背景の横幅・高さをwidth・heightプロパティを使って、videoタグ、全体を囲う要素、薄いレイヤー要素に当てます。

videoタグにobject-fit: cover;を当てて設定した高さを維持したままレスポンシブに可変するように調整します。

position: absolute;をvideoタグ、薄いレイヤー要素に当てます。

全体を囲う要素にposition: relative;を設定、上記absoluteの基準位置を指定します。

最後にz-indexプロパティを使って、videoタグ、薄いレイヤー、テキスト・画像の順番に上に重ねるようにすればOKです。

以上で動画背景の完成です。

まとめ

サイトのイメージに動きを付けたい場合、よくメインヴィジュアルに動画を設置する例があります。

本記事を参考に導入・設置してみてください。

以上で解説を終わります。

目次

関連記事

プログラミング

【futureshop】コマースクリエイター新規構築・移行作業でよく使うマニュアルサイト【まとめ】

更新日:2020.12.22
352
プログラミング

Webテキストの日本語に含まれる役物を半角にする方法

2020.06.03
378
WordPress プログラミング

wordpressのパーマリンクに拡張子(.html等)を付けれるよう変更したい

2020.07.17
246
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
1303