最近のウェブデザインのトレンドで背景全面に大胆に動画を配置するケースがよく見られるようになってきました。

つい先日もjQueryを使ってYouTubeの動画を背景として使うプラグイン［jQuery Tubular］を紹介しました。今日はjQuery抜きで、html5の［video］タグを用いて実装する方法を紹介します。

流れとしてはvideoタグでの動画の表示をブラウザのウィンドウサイズ全体に広げて、その上にコンテンツを配置することになります。

HTML の記述

HTMLは「video」タグとコンテンツを内包したブロック要素で構成します。

<body>
<video id="bg-video" autoplay loop muted>
<source src="bg-movie.mp4" type="video/mp4">
<source src="bg-movie.webm" type="video/webm">
</video>

<div id="contents">
コンテンツ
</div>
</body>

videoタグに「autoplay」、「loop」、「muted」を指定しておくことがポイントの１つ。
source タグでは、現状 H.264 に対応していないFirefox でも表示できるようにOGV形式でも動画を指定するようにします。

CSS の記述

CSS側では、videoタグに対して「position:fixed;」として、横幅と縦幅を指定して動画を配置する準備をしておきます。
また「z-index」でマイナスの値を指定してコンテンツの背景に配置されるようにします。

保険として、IE（インターネット・エクスプローラー）など、一部のブラウザで video タグでの再生に対応していないケースを想定し、body タグで代替の背景画像をしておくとなお良いでしょう。

さらに IE 用の設定で、video タグをブロック要素として扱うための記述も必要です。
…インターネット・エクスプローラー、本当に厄介ですね。

body {
/*  IE8以下の代替の背景画像  */
background:url("bg.jpg") #333;
background-attachment:fixed;
background-size:cover;
position:relative;
}

video {display:block;}
 
#bg-video {
position:fixed;
right:0;
bottom:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-1;
}

.htaccess の記述

最後に補足になりますが、「.htaccess」で動画ファイルをブラウザに認識させるためのコードを仕込んでおくと、背景動画が再生されないようなエラーが激減します。

AddType video/ogg .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

基本的な設定は以上。
この方法のデメリットは、ブラウザ内での video の再生になるのでスマートフォンでは挙動が不安定になること。
スマートフォン用には CSS3 の［Media Queries］を利用するなどして、背景動画を表示させないようにするなどの対策が必要です。
サンプルは以下からどうぞ。

ウィンドウサイズの背景全面に動画を再生する方法：サンプル・デモ