最近ではcssだけで、javascriptのような動作などが実現できるようになりました。
サイトの背景などに動画を埋め込むこともCSSだけで実装可能です。
対応していないブラウザもあるので、対応させたい古いブラウザなどがある場合jsなどを利用して実装する必要があります。
ここで、CSSで動画を背景に設定するためには、video要素を使います。
1 2 3 4 |
<video poster="movie.jpg"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> |
動画ファイルにはMP4とwebmファイルの二つが適しています。
.webm動画はChrome, Firefoxなどがサポートされています。
1 2 3 4 5 6 7 8 9 10 11 12 |
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タグをブロック要素に指定します。
1 2 3 4 5 6 7 8 9 10 11 |
<!--[if lt IE 9]> <script> document.createElement('video'); </script> <![endif]--> <style> video{ display: block; } </style> |
コメント