スクリプト無し、動画をページの背景いっぱいに表示する方法
レスポンシブにも対応
/**************************************************************************/
http://www.nxworld.net/tips/css-fullscreen-background-video.html
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずに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のみで簡単に実装することができます。
実際の動きは以下で確認できます。