【備忘録】ファーストビュー画面いっぱいに動画を配置する
サイトのトップページなどで
動画ファイルをパソコン画面いっぱいに配置する方法です。
デモページ
※動画の読み込みに時間がかかる場合があります。
まず動画ファイルを準備。
今回は mp4ファイル を使用しました。
動画素材：After Effects Style 様
See the Pen vqEJqa by IZU_HASHI (@iziz) on CodePen.
HTML
画面全体をdivタグでくくり（ここでは class=”video_wrapper”）、
video タグ（HTML5）を使用して動画を配置。
動画は autoplay（自動再生）、loop（繰り返し再生）を設定。
|
1 2 3 4 |
<div class="video_wrapper"> <p>TEST PAGE</p> <video src="●ここに動画ファイルのパスが入ります●" autoplay loop "></video> </div> |
CSS
position と z-index を使用して
動画とコンテンツ（ここではpタグ）をレイヤーにして重ねて表示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
body { margin: 0; padding: 0; } .video_wrapper { position: relative; overflow: hidden; width: 100%; height: 100vh; } video { display: block; margin: 0 0 0 auto; } p{ margin: 0; padding: 0; position: absolute; left: 100px; top: 100px; z-index:1; color:#FFF; font-size: 300%; } |
デモページ
※動画の読み込みに時間がかかる場合があります。
画面いっぱいに動画が動くのは
インパクトがありますね。
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
