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

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

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

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

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

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