こんにちは、Ryohei（@ityryohei）です！

要素の背景に動画を設定します。

HTML5で追加されたvideoタグにより、動画を容易にサイトに埋め込むことができるようになりました。最近では日本国内のサイトでも見かけるようになり、多くのWebサイトが動画を埋め込んだメインビジュアルを採用しています。メインビジュアルの背景に動画を埋め込むことで、サイトのイメージやコンテンツ内容をユーザーにわかりやすく伝えることができるため、今後も増えていくのではないかと思います。

以下デモになります！メインビジュアルの背景に動画を埋め込んでいます。動画を表示する親要素の高さは固定としています。

Demo

videoタグのオプション

以下はvideoタグの主なオプションになります。デモでは以下のオプションを指定しています。

poster
動画のダウンロード中、または再生されるまで表示する静止画を設定します。効かない場合はbackground-imageで静止画を指定しておきましょう！

autoplay
動画を自動的に再生するようにします。

loop
動画を繰り返し再生するようにします。

muted
動画の音声をミュートにします。

HTML

<div class="mainVisual">
  <video src="//into-the-program.com/asset/video/header-video.mp4" poster="//into-the-program.com/asset/video/header-video.png" autoplay loop muted></video>
</div>

CSS

CSSではmainVisualの要素に対してposition:relativeを指定して相対位置とし、videoタグにはposition:absoluteを指定しています。動画は親要素いっぱいに表示するためにminサイズを100%にしています。

また動画の上にコンテンツを載せるため、z-indexに負の値を指定して重なり順を下にしています。

※z-indexはpositionのstatic以外の値が定義されている要素にだけ適用できます。

<style>
body {
  margin: 0;
  padding: 0;
}
.mainVisual {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
mainVisual  video {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  mainVisual {
    height: 500px;
  }
}
</style>

メディアクエリを設定する場合は、メインビジュアルをサイトの構成に合った高さに設定しましょう！

以上、メインビジュアルの背景に動画を設定するのご紹介でした！最後まで読んでいただきありがとうございました！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら