[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック

サイト構築 -CSS

Post on:2014年6月13日

sponsorsr

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。

Create Fullscreen HTML5 Page Background Video

デモ
実装

デモ

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

デモページ

コンテンツを配置した右のパネルは、動画が透けて見えています。

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

HTML5 Video

実装

HTML

現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。

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

CSS

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

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

IE8対策

IE8用に背景画像をセットしておくだけでは不十分です。videoタグをブロック要素として扱うように設定します。

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

<style>
  video { display: block; }
</style>
</head>