動画を背景にしたブロック

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

デモページで見る

メインビジュアルなどで使える動画背景のブロックです。
動画やテキストの色に応じてフィルターなどをかけると、より見やすくなります。

CSSの解説

<div class="back-video">
  <video src="動画ファイルのURL" autoplay loop muted playsinlin></video> <!-- 動画 -->
  <div class="over-cont">
    <!-- ここにコンテンツ -->
  </div>
</div>

/*** 動画背景のボックス ***/
.back-video{
  position: relative; /*必須*/
  width: 100%; /*フルワイド*/
  height: 500px; /*任意の高さ*/
}

/*** 動画(video) ***/
.back-video > video{
  position: absolute;
  top: 50%; /*中央寄せ*/
  left: 50%;
  transform: translate(-50%, -50%); /*中央へ*/
  width: 100%;
  height: 100%;
  object-fit: cover; /*要素に合わせてトリミング*/
}

/*** 動画上のコンテンツ ***/
.over-cont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /*中央配置*/
  text-align: center; /*子要素を中央並べ*/
  color: white; /*文字色*/
  text-shadow: 0 0 1px #000; /*文字にシャープな影*/
}

動画 (videoタグ) を背後に配置して、その上にコンテンツを設置しています。

• 動画背景ブロック全体 .back-video
  • 子要素の位置基準にするためにposition: relativeを指定
  • width: 100%でフルワイドにする
  • 高さheightには動画の比率などに応じて任意の値を指定（100vhで全画面表示）
• 動画部分 .back-video > video
  • position: absoluteで絶対配置
  • top,leftを50%、translate(-50%,-50%)で中央配置
  • width: 100%, height: 100%で親要素いっぱいに広げる
  • ブロックの幅に合わせて動画を中央でトリミングobject-fit: cover
• コンテンツ部分 .over-cont
  • videoと同じくposition:absoluteで中央配置
  • text-align: centerで中身を中央寄せ
  • text-shadow: 0 0 1px #000で影を付けて文字を見やすく

これが理想的な形なのですが、配置する箇所によっては親要素の余白などが影響してフルワイドにならないことがあります。その場合は、.back-videoに親要素の余白と同じだけネガティブマージン(marginのマイナス値)を指定する必要があります。

要素のセンタリングについて

背景動画 video やコンテンツ部分で使われているposition: absoluteを使ったセンタリングは、以下のようなプロセスで行われています。

top: 50%、left: 50%で始点をセンターに合わせる。

要素の半分の幅・高さだけ移動させて、要素の中央をセンターに合わせる。

親要素の中央に揃える場合は、親要素にposition: relativeを指定して、揃えたい子要素にposition: absoluteを指定。

videoタグの記載方法

サンプルで使用しているvideoタグは、<video src="" autoplay loop muted playsinlin></video>となっています。

各値に関しては以下の通りです。

応用CSS

上記コンテンツを少し弄ってやれば、レイアウトを色々と変えることができます。
例をいくつか紹介するので、サイトや動画に合ったカスタマイズをしてみてください。

親要素を無視して画面幅いっぱいに表示

どうしても親要素の余白でフルワイドにならない用のCSSです。
ネガティブマージンmargin: calc(50% - 50vw)を左右に当てて、無理やり画面幅サイズにしています。

しかし、ビューポイント (vw) を使うため、スクロールバー分だけはみ出てしまう問題があります。対策としてスクロールバーの幅 17px だけ小さくしていますが、ブラウザなどにより表示が異なるので注意してください。

スクロールバーの幅を設定してしまうのが良いかもしれませんが、あくまで最終手段です。

See the Pen 親要素を無視したフルワイドの動画背景 by チータツ (@cheese_fuji) on CodePen.

追記するCSSは以下の通りです。

/*** 親要素を無視してフルワイドに ***/
.back-video{
    /*ネガティブマージン（8.5pxはスクロールバーの幅/2）*/
  margin-right: calc(50% - 50vw + 8.5px);
  margin-left: calc(50% - 50vw + 8.5px);
}

/*スマホはスクロールバーを考慮しない*/
@media screen(max-width: 950px){
  .back-video{
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  }
}

全画面サイズ（フルスクリーン）の動画背景コンテンツ

ボックス全体 (.back-movie) を height: 100vwにすれば、全画面サイズの動画背景になります。

以下はサンプルです。

See the Pen フルスクリーンサイズの動画背景コンテンツ by チータツ (@cheese_fuji) on CodePen.

デモページで見る >

オーバーレイ（フィルター）をかける

div要素でオーバーレイを作成して追加したものです。
position: absoluteの絶対配置で、BOX全体を覆うサイズにします。（動画とコンテンツの間に追記しましょう）

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

videoの疑似要素で作成しようとしましたが、videoタグには疑似要素が付けられないようです（初めて知った）。

なお、動画の明るさを調整するだけなら、オーバーレイを作らなくてもfilter: brightness()をvideoタグに追記するだけで十分です。（画像imgと同じです）

テキスト量に応じて高さを変える

表示するコンテンツ量で高さも変わる動画背景です。
変更点は以下の通り。

• ブロック全体 (.back-video) に height を指定しない
• コンテンツ部分 (.over-cont) をフレックス表示display: flexに変更
  • flex-direction: columnで縦方向に並べ
  • align-items: centerで中央へ

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.