初心者のためのWEBデザイナーの教科書

背景に動画を使用する(vol.①)

背景に動画を使用する①

動きがあって、インパクト効果抜群。動画を読み込む方法はいくつかありますが、容量が重いものもあるので気をつけましょう。
【印象に残る動画を使った公式サイト】
放課後NPO
Combi-スィングベットチェア-


https://cocohp.com/video/demo.mp4
背景、というとbackgroundプロパティを思い浮かべるのですが、backgroundは、使用しません。動画の埋め込み方を、こちらで解説しているので参考にしましょう。

▶動画の埋め込み方を見る


●スマホとパソコンでは、動画の見え方が違います。

▶ 背景動画サンプルを見る
http://cocohp.com/video/sample001.html

▶ スマホで見る


wrapエリアに、動画を配置します。そして、その上に、テキスト(画像などでもOK)を重ねます。要素の重なりについてを解説していますので参考にしてください。

イメージを重ねることも可能です。SVGを使用すると、解像度を保つことができますね。


スマートフォンでは、動画は自動再生しませんので、静止画像となります。
レスポンシブを使って、別のイメージやGIFアニメーションに切り替えて使うなどの手法がよく使われています。