<div class="video-hero">
<video autoplay muted loop playsinline poster="https://placehold.co/1920x1080/1e293b/ffffff?text=Video+Loading">
<source src="https://codeshack.io/web/example.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
<div class="content">
<h1>Explore the Wild</h1>
<p>Journey into the unknown with our premium travel packages.</p>
<button>Start Adventure</button>
</div>
</div>
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; }
.video-hero {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: 0;
object-fit: cover;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.content {
position: relative;
z-index: 2;
padding: 20px;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
button {
padding: 12px 30px;
font-size: 1rem;
background: white;
color: black;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}