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

cocohp

6年前

背景に動画を使用する①

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

https://cocohp.com/video/demo.mp4

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

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

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

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

▶　スマホで見る

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

<!-- HTML ----->
<div class="wrap">
<video class="background" src="video/demo.mp4" autoplay loop muted></video>	
<div class="message">ちゅんちゅん</div>
</div>

<div class="message">ちゅんちゅん</div>

</div>

/*CSS解説*/
.wrap {
  position: relative;/*親要素に指定*/
}
.background{width:100%; /*動画を100%配置*/}	
.message {
  color: #fff;/*テキストカラー*/
  font-size: 400%;/*テキストサイズ*/
  position: absolute;/*子要素に指定*/
  left: 35%;  top: 200px;/*配置指定に注意してください。*/
  z-index: 1;/*動画より上に重ねる*/
}

/*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アニメーションに切り替えて使うなどの手法がよく使われています。