I have a unique template design that I am working on:
https://i.sstatic.net/lLleK.png
My goal is to replace the current background image with a video. Here is my attempt by adding a <video> tag:
<!-- ======= 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 -->
Unfortunately, the video overlaps the next div as shown here:
https://i.sstatic.net/86DCf.png
I also tried changing the background image source to a video but the video did not load:
#hero {
width: 100%;
height: calc(100vh - 110px);
background: url("https://www.w3schools.com/howto/rain.mp4") top center;
background-size: cover;
position: relative;
}
The result was unsatisfactory:
https://i.sstatic.net/HrsCu.png
Can anyone provide guidance on how to properly display the background video and ensure that the welcome message div appears over it rather than beside it?
UPDATE:
New code implementation:
<!-- ======= 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 -->
Updated result: