[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）

サイト構築 -CSS

Post on:2014年9月5日

動画を背景に使う時の大切なポイント

動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。
動画を背景に使う時はおそらく自動再生にするでしょう、それは問題ありません。しかし音には注意してください。理想としては音を含まない動画がよいです。
動画はHTML5をサポートしないブラウザ用に、代替画像を用意してください。代替画像はスマホやタブレットでも有効です。モバイルデバイスのほとんどは自動再生をサポートしていません。
背景に使う動画は、その長さが重要です。短すぎると反復的な感じがしてしまい、長すぎると別のデザインエレメントとして扱われてしまいます。時間の目安としては、12-30秒くらいがベストです。
帯域も重要なポイントです。動画はできるだけ軽量にする必要があります。画面サイズに合わせて異なる動画ファイルを使用することも可能です。目安としては5MB以下、理想は500K以下です。

デモ

デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。

デモページ

コンテンツを配置した右のパネルは、動画が透けて見えており、リンクのボタンもクリックできます。

CodePenにもデモがあり、こちらではオンラインでコードを編集することもできます。

CodePen

CSSで動画を背景にしたコンテンツを実装する方法

Step 1: HTML

video要素を使い、動画ファイルは現在のところ2種類用意するのがよいでしょう。.webm動画はGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。
ポスター画像には動画の1フレーム目の絵にするのがよいです。ページを読み込んだ際はまず画像が表示され、動画ファイルの読み込みが完了したら動画が表示されます。同じ絵にしておくと、最初に表示された画像から動画へとスムーズに変わります。

<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>

オーバーレイで表示させるコンテンツは、通常通りの実装です。

<div class="overlay">
  コンテンツ
</div>

Step 2: CSS

動画をフルスクリーンで表示するように指定し、z-indexは-100にします。あとはvideoをサポートしていないデバイスに、動画の代替として画像を表示させます。

video#bgvid {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  background: url(polina.jpg) no-repeat;
  background-size: cover;
}

video要素をサポートしていない古いブラウザ対策

IE8などの古いブラウザでは、video要素をサポートしていません。代替要素として背景画像をセットしておくだけでは不十分で、videoタグをブロック要素として扱うように設定します。

<head>
<!--&#91;if lt IE 9&#93;>
<script>
  document.createElement('video');
</script>
<!&#91;endif&#93;-->
 
<style>
  video { display: block; }
</style>
</head>

JavaScriptでvideoを定義し、CSSでそのvideoをブロック要素として定義します。この数行のコードを記述しておくと、IE8でもvideo要素を認識し、そこに背景画像を表示します。

モバイルでの取り扱い

スマホやタブレットなどのモバイルデバイスで、動画を背景いっぱいに

iOSをはじめ、ほとんどのモバイルではHTML5のvideoでの自動再生をサポートしていません。
このような場合には、動画に再生ボタンが表示されます。
その際、動画上に配置したコンテンツはリンクがロックされてしまいます。

現時点でモバイルでの最もベターな解決方法は、背景に代替画像を表示することです。既存のCSSに下記を加えます。

@media screen and (max-device-width: 800px) {
  html { background: url(polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

Media Queriesでは800px以下の時に、背景画像を表示するように設定します。