Add video background to a boostrap template

Question

I've downloaded a bootstrap template and i want to replace the image with a video, but when i try to, the video is fixed to the background of the complete website, and not just the hero container i want it in. I just want to replace the image with a video. Can anybody please help. Thank you in advance

#hero {
  width: 100%;
  height: 90vh;
  overflow: hidden;
  position: relative;
}
#hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 95%;
  background: linear-gradient(to right, rgba(30, 67, 86, 0.8), rgba(30, 67, 86, 0.6)), url("../img/hero-bg.jpg") center top no-repeat;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) rotate(0deg);
}
#hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 96%;
  background: #68A4C4;
  opacity: 0.3;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) translateY(18px) rotate(2deg);
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

<div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
      <video autoplay muted loop id="myVideo">
        <source src="assets/1055105924-preview.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
      <!-- Slide 1 -->
      <div class="carousel-item active">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Welcome to <span>Midlands Property Consultancy</span></h2>
          <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Lorem Ipsum Dolor</h2>
          <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">Sequi ea ut et est quaerat</h2>
          <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
          <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
        </div>
      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
      </a>

    </div>
  </section><!-- End Hero -->

Answer 1

Follow the steps below.

Add this css -

.video {
  width: 100%;
  height: 100vh;
}

Edit this css -

#myVideo {
  /* position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; */
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

Bring out the video tag and wrap it into a div class video as shown below -

<div class="video">
    <video autoplay muted loop id="myVideo">
      <source src="x.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>

Remove section tag if not required. I found that section opening tag was missing.

</section>End Hero

Also remove the below Carousel Html code if you do not need the carousel image slider.

<div id="hero-" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">

    <!-- Slide 1 -->
    <div class="carousel-item active">
      <div class="carousel-container">
        <h2 class="animate__animated animate__fadeInDown">Welcome to <span>Midlands Property Consultancy</span></h2>
        <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et
          est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse
          doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
        <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="carousel-item">
      <div class="carousel-container">
        <h2 class="animate__animated animate__fadeInDown">Lorem Ipsum Dolor</h2>
        <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et
          est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse
          doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
        <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
      </div>
    </div>

    <!-- Slide 3 -->
    <div class="carousel-item">
      <div class="carousel-container">
        <h2 class="animate__animated animate__fadeInDown">Sequi ea ut et est quaerat</h2>
        <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et
          est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse
          doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
        <a href="" class="btn-get-started animate__animated animate__fadeInUp">Read More</a>
      </div>
    </div>

    <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
    </a>

    <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
    </a>

  </div>

And if you remove the Carousel Html code then remove this css also. It is related to the Carousel Slider.

#hero {
      width: 100%;
      height: 90vh;
      overflow: hidden;
      position: relative;
    }

    #hero::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: 130%;
      height: 95%;
      background: linear-gradient(to right, rgba(30, 67, 86, 0.8), rgba(30, 67, 86, 0.6)), url("https://images.pexels.com/photos/11095794/pexels-photo-11095794.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") center top no-repeat;
      z-index: 0;
      border-radius: 0 0 50% 50%;
      transform: translateX(-50%) rotate(0deg);
    }

    #hero::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: 130%;
      height: 96%;
      background: #68A4C4;
      opacity: 0.3;
      z-index: 0;
      border-radius: 0 0 50% 50%;
      transform: translateX(-50%) translateY(18px) rotate(2deg);
    }