JSを使わずに背景に動画を使う

こんにちは。

ウェブラボ技術メモ第14回です。

ここ数年で、背景に動画を使ったサイトを見る機会が増えました。

製品の使用イメージやお店などの雰囲気をインパクトと共に伝えることができ、よりユーザーの視点を画面に集中させることができますが、動画を用いるため、重くなる、旧ブラウザに対応できないなどといったデメリットもあります。

動画の表示にはjavascriptを使う方法もありますが、

今回はhtml5で登場したvideoタグとcssだけで背景に動画を表示し、
旧ブラウザで表示する際は代替画像を表示してみたいと思います。

当然ながら最初に動画を用意する必要があります。

動画の形式は今回のデモではmp4にしました。
動画の長さとしてはあまり長くなってしまうと容量が増えてしまいますので、20秒ほどで収めると良いでしょう。

htmlの記述はこれだけです。

<video src="movie.mp4" autoplay loop></video>

自動再生とループ再生されるようになっています。

CSSはvideo要素とIE8以下で代替画像表示の為、bodyに対して指定をし、

body {
  margin: 0;
  padding: 0;
/*  IE8以下の代替の背景画像  */
  background: #333 url(../img/ie8bg.gif) 50% 50% no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

video {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

後は背景の上に乗るpタグなどに

p {
  color: #fff;
  font-size: 123.1%;
  margin: 50px;
  position: relative;
  z-index: 3;
  text-align: center;
}

と、指定するだけです。

ではこれで作成したデモをご覧ください。

動画を背景にするデモ

背景に動画が表示され、見出しなどの要素が上に乗っています。

また、IE8以下のブラウザで見ると代替画像が表示されていると思います。

jqueryのプラグインを使用すれば旧ブラウザにも対応できるかもしれませんが

代替画像を用意すれば、htmlとcssだけでも十分に背景に動画をつかったサイトを作ることが可能です。

また、動画を背景にすると、画質が粗くなってしまう、という時には

htmlのvideoタグの前に空の要素を記述し、

<div class="pattern"></div>

CSSでドットやストライプなどの画像を背景で表示するようにすれば

.pattern {
  width: 100%;
  height: 100%;
  background: url(../img/yokojima.png);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

背景動画を少しおしゃれにしたデモ

このように画質を目立たなくすることも出来ます。

製品や会社を大きくアピールしたいような時には、動画を背景に使ってみるのも良いのではないでしょうか。

以上ウェブラボ技術メモでした。