jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。
Basic Fullscreen Video Background
レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。
IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。
実装は、非常にシンプルです。
HTML
動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。
[html]
...
コンテンツ
...
[/html]
CSS
動画と代替で表示する背景画像のスタイルシートです。
[css]
body {
margin: 0;
padding: 0;
/* IE8以下の代替の背景画像 */
background: url(http://mattgrossdesign.com/raw-media/first-frame-screencap.jpg) #333;
background-attachment: fixed;
background-size: cover;
}
#video-background {
/* 動画を背景に設定するスタイルシート */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
[/css]
スクリプトを使用した実装方法は、下記がお手軽です。