Video banner in html (bootstrap page) incorrectly laid out - html

Question

I am attempting to adapt code from this site: Video Header snippet
This places a video header and it overrides my entire page and content with itself (the video header).
I would like to resize the header so that it has a width of 100% (across the whole page) and a height of x (decided by me) e.g. 200.
I've tried various things to change both the overlay size and the video but nothing has worked.
<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>
The whole of the css used is below. Note, this is used in the same style sheet as bootstrap css has been implemented.
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;
}
}
As you can see I have adapted the code from its original (see link above). For instance I have changed this value from 100% to 40%. It works in that it changes the overlay size.
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 40%;
width: 100%;
What I cannot figure out however is how to get the video also part of the overlay and sized correctly AND for the rest of my existing content not to be hidden from view/overwritten.
For some reason, once I add this content, I cannot scroll down through my site.

Answer 1

If I understand your question :) ,
I think setting the height and min-height to 200px for the header fix the issue like :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
see below snippet :
header {
position: relative;
background-color: black;
height: 200px;
min-height: 200px;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
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: 100%;
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;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<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>
<section class="my-5">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p class="mb-0">
Created by Start Bootstrap
</p>
</div>
</div>
</div>
</section>

Answer 2

Try deleting all the z-index you have in your CSS and then add z-index: -1; on the media query inside the header, like this:
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
z-index: -1;
}
header video {
display: none;
}
}