I'm currently working on modifying code sourced from Video Header snippet to suit my needs.
The video header I've implemented is taking over my entire page, and I'd like to adjust its size to a width of 100% across the page and a specific height of, say, 200 pixels.
I've attempted several methods to resize both the header and the video, but none have been successful.
<h1>My Website</h1>
<p>Website text here</p>
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
Here's a snippet of the CSS utilized for the header. Please note that this is part of the same stylesheet as the Bootstrap CSS.
header {
position: relative;
background-color: black;
height: 15vh;
min-height: 15rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 40%;
width: auto;
height: 40%;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
@media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
I've made modifications to the original code to adjust the overlay size, but I'm struggling to properly size and include the video in the overlay, while also ensuring that my existing content is not obstructed.
Interestingly, after integrating this content, I find myself unable to scroll through the site for some reason.