こんにちは、制作担当のI.Sです。
今回はwebサイトの背景に動画を固定する方法についてご紹介します。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
CSS 背景動画 by 岩吉爽助 (@zrdkashq-the-vuer)
on CodePen.
※右下の「Rerun」で何度も再生できます。
背景に動画が固定されたまま、コンテンツにスクロールできます。
こちらも簡単に実装することができます。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
とはいっても、ただ固定する記述が多いので簡単です。
背景固定の記述
まずは一番上の親要素（今回ならば「#header」）にheightを設定します。
#headerの子要素（#video-area）に「position: fixed」を記述し、要素を完全固定します。
これはサイトの作りによっていろいろと変わると思います。
次にvideo本体に「position: absolute」を記述して、中央にくるようにします。
その後はレスポンシブ対応用にアスペクト比を固定します。
こちらはPCのみの実装でしたらなくても大丈夫です。
以上で完成します。
3.カスタマイズ
See the Pen
CSS 背景動画 02 by 岩吉爽助 (@zrdkashq-the-vuer)
on CodePen.
実はyoutubeも背景動画にすることができます。
その際はパラメータの設定をお忘れずに。
4.まとめ
背景を動画にするとアグレッシブなイメージになると思います。
かなり簡単に（コピペでも）実装できるので是非お試しください。
ではまた.
