Bootstrap 5: как добавить фоновое видео в качестве героя

У меня шаблон выглядит так:

Теперь я хочу заменить фоновое изображение фоновым видео. Поэтому я попытался добавить это <video> в раздел:

<!-- ======= Hero Section ======= -->
  <section id = "hero" class = "d-flex align-items-center">
    <video autoplay muted loop id = "myVideo">
      <source src = "https://www.w3schools.com/howto/rain.mp4" type = "video/mp4">
    </video>
    <div class = "container position-relative" data-aos = "fade-up" data-aos-delay = "500">
      <h1>Welcome to Day</h1>
      <h2>We are team of talented designers making websites with Bootstrap</h2>
      <a href = "#about" class = "btn-get-started scrollto">Get Started</a>
    </div>
  </section><!-- End Hero -->

Но, как вы можете видеть, видео сворачивает следующий div вот так:

Я также попытался изменить источник фонового изображения на видео, но не загрузил видео:

#hero {
  width: 100%;
  height: calc(100vh - 110px);
  background: url("https://www.w3schools.com/howto/rain.mp4") top center;
  background-size: cover;
  position: relative;
}

Результат:

Итак, как я могу правильно загрузить фоновое видео, чтобы следующий div, который является приветственным сообщением, был над ним, а не рядом с ним?

ОБНОВЛЯТЬ:

Код:

<!-- ======= Hero Section ======= -->
    <section id = "hero" class = "d-flex align-items-center">
        <video autoplay muted loop id = "myVideo">
            <source src = "https://www.w3schools.com/howto/rain.mp4" type = "video/mp4">
        </video>
        <div class = "container position-absolute" data-aos = "fade-up" data-aos-delay = "500">
            <h1>Welcome to Day</h1>
            <h2>We are team of talented designers making websites with Bootstrap</h2>
            <a href = "#about" class = "btn-get-started scrollto">Get Started</a>
        </div>
    </section><!-- End Hero -->

Результат: