ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。
古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
<body>
<video autoplay loop poster="img.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
</body>
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
要素への記述は必要ありません)
実際の動きは以下で確認できます。