動画：cssでvideoを背景に使う

背景に動画を設置しているサイトをよく見ると思います。

ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。

videoで動画を挿入する


&lt;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&gt;

1

2

3

4

5

</video>

autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。

動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。

各ブラウザへの対応状況は以下を参考にしてください。

http://caniuse.com/#search=mp4

http://caniuse.com/#search=WebM

ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。

動画を背景に設定する


#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}

1

2

3

4

5

6

7

#sampleVideo {