HTML - full width video on hero

0 votes
20 views
added Jan 22 in HTML by lcjr First Warrant Officer (11,960 points)

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;
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...