スクリプト無し、動画をページの背景いっぱいに表示する方法

サイト構築 -制作

Post on:2014年5月29日

sponsorsr

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;
}

スクリプトを使用した実装方法は、下記がお手軽です。