ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずに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」で配布されているものを使用しています。