動画背景ヒーローセクション
このパーツは、画面いっぱいに動画を流しながら、その上にキャッチコピーとボタンを重ねるヒーローセクションです。 video 要素を position:absolute で背景に敷き、 object-fit:cover で枠に隙間なくフィットさせています。
このパーツの使いどころと実装ポイント
このパーツは、画面いっぱいに動画を流しながら、その上にキャッチコピーとボタンを重ねるヒーローセクションです。video 要素を position:absolute で背景に敷き、object-fit:cover で枠に隙間なくフィットさせています。動画の上には半透明の黒いオーバーレイ（rgba(0,0,0,.55)）を重ね、その手前に文字を z-index で配置することで、明るい映像でも文字が読める構造にしています。
向いている場面
サービスの世界観を一目で伝えたいトップページに向きます。たとえば飲食店の調理風景、宿泊施設の客室や景観、スポーツジムのトレーニング映像など、空気感を動画で見せたい業種で効果的です。
カスタマイズと注意点
source の src を自社の動画に差し替えるのが基本です。オーバーレイの濃さを変えれば文字の見やすさを調整できます。動画は容量が大きくなりがちなので、短くループする軽い素材を選び、初回表示が遅くならないよう配慮してください。
autoplayを効かせるためmutedとplaysinlineは必須です（音声付き自動再生はブロックされます）- 通信量に配慮し、スマホでは静止画に切り替える設計も検討するとよいでしょう
よくある質問
動画の音声を鳴らすことはできますか？
背景動画はブラウザの仕様で音声付きの自動再生がブロックされるため、muted（消音）で再生する前提です。音を出したい場合は、利用者が自分でクリックして再生する別のプレーヤーを用意する必要があります。
スマートフォンでも動画は自動再生されますか？
playsinline と muted を指定しているため多くのスマホで自動再生されますが、通信量や端末負荷を考えると、スマホでは1枚の静止画に切り替える設計もよく使われます。データ容量の小さい利用者への配慮として有効です。