【備忘録】ファーストビュー画面いっぱいに動画を配置する

 

 Web技術

サイトのトップページなどで
動画ファイルをパソコン画面いっぱいに配置する方法です。

デモページ
※動画の読み込みに時間がかかる場合があります。


まず動画ファイルを準備。

今回は mp4ファイル を使用しました。
動画素材:After Effects Style

See the Pen vqEJqa by IZU_HASHI (@iziz) on CodePen.

HTML

画面全体をdivタグでくくり(ここでは class=”video_wrapper”)、
video タグ(HTML5)を使用して動画を配置。
動画は autoplay(自動再生)、loop(繰り返し再生)を設定。

CSS

position と z-index を使用して
動画とコンテンツ(ここではpタグ)をレイヤーにして重ねて表示。

デモページ
※動画の読み込みに時間がかかる場合があります。

画面いっぱいに動画が動くのは
インパクトがありますね。

 この記事の投稿者

iziz

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ