背景に動画を設置する方法｜videoタグ＋position/flex 2パターン解説

/* ── 親要素：重なりの基準点 ── */
.hero {
  position: relative;         /* 子要素の absolute の基準になる */
  width: 100%;
  height: 100vh;             /* 高さは用途に合わせて変更 */
  overflow: hidden;           /* 動画がはみ出さないよう切り取る */
}
/* ── ① 背景動画 ── */
.hero__video {
  position: absolute;         /* 親の左上を原点に配置 */
  inset: 0;                   /* top/right/bottom/left を全部0に */
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 縦横比を保ったまま領域全体を覆う */
  z-index: 0;                 /* 一番後ろに配置 */
}
/* ── ② 暗幕オーバーレイ（任意） ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);  /* 動画を暗くして文字を読みやすくする */
  z-index: 1;
}
/* ── ③ 前面コンテンツ ── */
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;              /* コンテンツを中央揃えするためflexを使用 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  z-index: 2;                 /* overlay(1)より前面に */
  color: #fff;
}

/* ── 親要素：flexで中央揃え ── */
.hero {
  position: relative;         /* videoのabsoluteの基準になる */
  display: flex;              /* コンテンツをflexで配置する */
  align-items: center;        /* 縦方向の中央揃え */
  justify-content: center;    /* 横方向の中央揃え */
  width: 100%;
  min-height: 100vh;          /* 最低でも画面全体の高さを確保 */
  overflow: hidden;
}
/* ── ① 背景動画（flexの外に出して背景化） ── */
.hero__video {
  position: absolute;         /* flexフローから外れて背景に回る */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;                 /* 一番後ろ */
}
/* ── ② 暗幕オーバーレイ（任意） ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}
/* ── ③ 前面コンテンツ ── */
.hero__content {
  position: relative;         /* z-indexを効かせるためrelativeを指定 */
  z-index: 2;                 /* overlay(1)より前面に */
  text-align: center;
  padding: 0 20px;
  color: #fff;
}