CSSのみでフルスクリーンの動画背景を実装する方法

CSSのみでフルスクリーンの動画背景を実装する方法

ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずにCSSのみで実装する方法です。
古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。

実装にはHTMLとCSSをそれぞれ下記のように記述します。

HTML

<body>
  <video autoplay loop poster="img.jpg">
    <source src="movie.mp4" type="video/mp4">
  </video>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  background: url(img.jpg) center center fixed no-repeat;
}
video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

フルスクリーンで表示されるように幅と高さを指定したvideo要素をposition: fixedで配置し、body要素には一応IE8などの非対応ブラウザ用に背景画像を指定しておくというものになります。
(非対応ブラウザは完全に無視ということであればbody要素への記述は必要ありません)
先述したようにほぼ全てのブラウザで同じように表示させたい場合はスクリプトを使って実装することにはなると思いますが、モダンブラウザであればこのようにCSSのみで簡単に実装することができます。

実際の動きは以下で確認できます。

※DEMOで使用している動画は、「商用利用できるものも有り!フリーの動画配布サイト 7」でも紹介している「Distill」で配布されているものを使用しています。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.