スクリプト無し、動画をページの背景いっぱいに表示する方法
Post on:2014年5月29日
sponsors
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。
Basic Fullscreen Video Background
レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。
IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。
実装は、非常にシンプルです。
HTML
動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。
<body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood+autumn-HD.mp4" type="video/webm"> </video> </body>
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;
}
スクリプトを使用した実装方法は、下記がお手軽です。
sponsors
