動画背景ヒーロー（プレースホルダ）
全画面 video loop を背景に敷くリッチヒーロー。実動画の代わりに動的グラデーションでプレースホルダ実装、HTMLに動画 URL 差し替えで完成。
解説
動画背景ヒーローは、全画面の video ループを背景に敷くリッチなヒーローのプレースホルダ実装です。実動画の代わりに .hero-vid__bg へ background-size:300% 300% の大きなグラデーションを当て、@keyframes vidLoop で background-position をゆっくり往復させて映像のような動きを再現しています。上に半透明の黒い .hero-vid__overlay を重ね、その上の白文字を読みやすく保つ三層構造です。JavaScript 不要で、本物の動画に差し替える前提のたたき台になります。
使う場面
- ブランドの世界観を映像で語りたいコーポレートトップ
- 飲食・旅行・不動産など雰囲気訴求が効く業種
- 実動画を用意する前の仮組みプロトタイプ
実装を仕上げるときは、背景の div を <video autoplay muted loop playsinline> に置き換えます。文字の可読性はオーバーレイの rgba(0,0,0,.4) の不透明度で調整してください。動画は容量が大きくなりがちなので、軽量に圧縮し、モバイルでは poster 画像で代替するとパフォーマンスを守れます。自動再生動画には muted が必須です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
プレースホルダを本物の動画に差し替えるには？
.hero-vid__bg の div を video 要素に置き換え、autoplay muted loop playsinline を付けて src に動画を指定します。muted がないと多くのブラウザで自動再生がブロックされます。
文字が読みづらいときの調整方法は？
背景の上に重ねた .hero-vid__overlay の rgba(0,0,0,.4) の最後の数値を大きくすると黒みが増し、文字のコントラストが上がって読みやすくなります。