動画背景ヒーローセクション
このパーツは、背景いっぱいの映像の上にキャッチコピーとボタンを重ねる 動画背景ヒーローセクション です。 position:absolute で背景レイヤーを敷き、その上に半透明の黒い overlay を重ねて文字を読みやすくし、さらに前面にコンテンツを z-index で乗せる三層構造になっています。
このパーツの使いどころと実装ポイント
このパーツは、背景いっぱいの映像の上にキャッチコピーとボタンを重ねる動画背景ヒーローセクションです。position:absolute で背景レイヤーを敷き、その上に半透明の黒い overlay を重ねて文字を読みやすくし、さらに前面にコンテンツを z-index で乗せる三層構造になっています。サンプルでは「VIDEO」プレースホルダにグラデーションを当てており、実装時はここに実映像を差し込みます。
向いている場面
世界観や臨場感を一瞬で伝えたい飲食・ホテル・ブランドサイト、サービスの雰囲気を映像で見せたい制作会社・スタジオ、採用やイベントの導入に向きます。静止画より動きで惹きつけ、第一印象を強められます。
カスタマイズと注意点
- オーバーレイの濃さを変えると、明るい映像でも文字のコントラストを保てます
- コピーやボタンの文言を差し替えるだけで用途を変えられます
実映像を使う場合は muted と playsinline で自動再生し、容量の重い動画は読み込みに配慮してください。映像が再生できない環境向けに静止画のフォールバックを用意し、文字は映像の明暗に左右されない可読性を確保しましょう。
よくある質問
プレースホルダの代わりに実際の動画を入れるにはどうしますか？
背景レイヤーのプレースホルダを動画要素に置き換え、自動再生したい場合は muted と playsinline、ループしたい場合は loop を指定します。スマホでも止まらず再生させるため、無音・軽量のファイルにするのがおすすめです。
動画の上の文字が読みにくくならないか心配です。
映像の上に半透明の黒いオーバーレイを重ねて文字を浮かせています。明るい映像で読みにくいときはオーバーレイの濃さを上げてください。動画が再生できない環境に備え、同じ雰囲気の静止画を代わりに表示する設定も入れておくと安心です。