CSSで動画を全画面表示の背景にする
少し前にウェブデザインのトレンドとしてよく見られた、全画面表示の動画背景ですが、クライアントワークでも採用する機会があり、今更感はありますが備忘録として残しておきたいと思います。
今回は動画を背景にするのに加えて、解像度が低いのを補うのと、テキストの視認性を高めるためにオーバーレイ用のレイヤーを設置しています。
背景に使う動画ですが、読み込み速度に影響するのである程度、解像度やビットレートを調整することで可能な限りサイズを落としておきたいところですね。では早速コードを見ていきます。
【HTML】※一部省略
いかがでしょうか、動画コンテンツが増えてきている昨今では、ファーストビューに動画を使うことでよりインパクトの強いビジュアルにすることができます。訴求もアップするのでブランディングを重視するサイトにぴったりですね。 (参考にさせて頂いたサイト) CSSのみでフルスクリーンの動画背景を実装する方法
<div class="bg-video-wrap"> <video src="./sample.mp4" loop muted autoplay> </video> <div class="overlay"> </div> <h1>前面表示テキストコンテンツ </h1> </div>【CSS】
.bg-video-wrap { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(./sapmle.png) no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); background-size: 4px 4px; z-index: 2; }まずHTMLですが、背景にする場合にはCSSのbackgroundプロパティで使用するイメージがありますが、動画の場合はvideoタグで実装します。このvideoタグについては過去記事「Webページの動画再生で使うvideo要素を使いこなす」にて詳しく説明しています。合わせてオーバーレイ用の要素を追加しておきます。 そしてCSSでは、video要素に対してmin-widthとmin-heightを設定することで画面全域に動画を表示させるようにします。また、動画を包括するラッパー要素には背景画像に動画の静止画キャプチャを指定することで、動画が再生されない場合にもビジュアルに影響を与えないようにしておきます。 また、動画の前面に表示させるオーバーレイ用の要素には、background-imageとbackground-sizeで細かいモザイクタイル上のパターンを作成しています。もちろん、画像素材でパターンも用意してもOKです。 これだけで全画面表示の動画背景コンテンツが実装できます。今回のサンプルはこちらに作成しています。
See the Pen Fullscreen video background by designsupply (@designsupply) on CodePen.
いかがでしょうか、動画コンテンツが増えてきている昨今では、ファーストビューに動画を使うことでよりインパクトの強いビジュアルにすることができます。訴求もアップするのでブランディングを重視するサイトにぴったりですね。 (参考にさせて頂いたサイト) CSSのみでフルスクリーンの動画背景を実装する方法
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories