背景に動画を使用する①
動きがあって、インパクト効果抜群。動画を読み込む方法はいくつかありますが、容量が重いものもあるので気をつけましょう。
【印象に残る動画を使った公式サイト】
放課後NPO
Combi-スィングベットチェア-
背景、というとbackgroundプロパティを思い浮かべるのですが、backgroundは、使用しません。動画の埋め込み方を、こちらで解説しているので参考にしましょう。
▶動画の埋め込み方を見る
●スマホとパソコンでは、動画の見え方が違います。
▶ 背景動画サンプルを見る
http://cocohp.com/video/sample001.html
wrapエリアに、動画を配置します。そして、その上に、テキスト(画像などでもOK)を重ねます。要素の重なりについてを解説していますので参考にしてください。
video/demo.mp4 ちゅんちゅん
/*CSS解説*/
.wrap {
position: relative;/*親要素に指定*/
}
.background{width:100%; /*動画を100%配置*/}
.message {
color: #fff;/*テキストカラー*/
font-size: 400%;/*テキストサイズ*/
position: absolute;/*子要素に指定*/
left: 35%; top: 200px;/*配置指定に注意してください。*/
z-index: 1;/*動画より上に重ねる*/
}
イメージを重ねることも可能です。SVGを使用すると、解像度を保つことができますね。
スマートフォンでは、動画は自動再生しませんので、静止画像となります。
レスポンシブを使って、別のイメージやGIFアニメーションに切り替えて使うなどの手法がよく使われています。
