HTML
<section class="hero-section">
<video autoplay muted loop class="hero-video">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/71/Scottish_highlands_drone_footage.webm/Scottish_highlands_drone_footage.webm.720p.vp9.webm" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="hero-content">
<h1>The Healthy Home Revolution:<br>Enhancing well-being through design
</h1>
<p>Your adventure starts here. Watch the video to learn more.</p>
</div>
</section>
CSS
.hero-section {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero-content {
color: white;
text-align: center;
}