Here is an example based on your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CTA Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="background-video">
<video src="https://file-examples.com/storage/fe4996602366316ffa06467/2017/04/file_example_MP4_1920_18MG.mp4" autoplay muted playsinline loop></video>
</div>
<div class="cta-container">
<div class="cta">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
</header>
</body>
</html>
Customize the styles according to your needs and screen size using the following CSS:
/* Style the header */
.header {
min-height: 50vh; /* Adjust height as required */
position: relative; /* Necessary for absolute positioning */
}
/* Style the video background */
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Ensure video fills the header */
overflow: hidden; /* Prevent video overflow */
}
.background-video video {
width: 100%;
height: 100%; /* Stretch video to fit container */
object-fit: cover; /* Maintain aspect ratio (if needed) */
}
/* Style the CTA container (optional for centering) */
.cta-container {
display: flex; /* Turn parent container into a flexbox (optional) */
justify-content: center; /* Horizontally center the CTA div (optional) */
position: absolute;
top: 67%; /* 80% from the top of the header (Adjust this as needed Important) */
bottom: 10%; /* 10% from the bottom of the header (Adjust this as per needed Important) * */
left: 0;
right: 0;
z-index: 2; /* Ensure CTA div is above background video */
}
/* Style the CTA div */
.cta {
width: fit-content; /** adjust if necessary */
height: fit-content; /** adjust if necessary */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
padding: 1rem;
border-radius: 5px;
color: #fff;
}
/* Style CTA buttons (adjust as necessary) */
.cta button {
padding: 0.5rem 1rem;
border: none;
color: inherit;
background-color: #333; /* Adjust button color */
cursor: pointer;
}
/* Media queries for further adjustments (optional) */
@media (max-width: 768px) {
.cta {
/* Adjust styles for smaller screens if needed */
}
}