CSSで動画を背景に設定する

最近ではcssだけで、javascriptのような動作などが実現できるようになりました。

サイトの背景などに動画を埋め込むこともCSSだけで実装可能です。
対応していないブラウザもあるので、対応させたい古いブラウザなどがある場合jsなどを利用して実装する必要があります。

ここで、CSSで動画を背景に設定するためには、video要素を使います。

動画ファイルにはMP4とwebmファイルの二つが適しています。
.webm動画はChrome, Firefoxなどがサポートされています。

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

video要素をサポートしていないブラウザでは、動画を再生できないため、
video要素の入る場所に背景画像を指定し、videoタグをブロック要素に指定します。