Position: Fixed; element is scrolling with entire page - html

Question

I'm trying to place text over a video on my site, but to do this I had to use a position: fixed; element so the text would appear in front of the video. I thought that doing this would just fix it to the one spot and that position: absolute; was the one that would have kept the text in place when scrolling. I don't want the text to be visible once you've scrolled past the video. I'm also trying to keep the video in the center of the page. Right now I'm using a left and right margin of 120px but it's not perfect.
<div class="container">
<video id="video" width="770" height="882" playsinline controls autoplay muted loop>
<source src="video/Cage_Broken_Boy.mp4" type="video/mp4"/>
</video>
</div>
<div class="overlay">
<h1>CAGE THE ELEPHANT</h1>
<h2 class="info">PERFORMING
JUNE 27 7:00PM
SARATOGA PERFORMING
ARTS CENTER
</h2>
</div>
/css/
video{
justify-content: center;
display: block;
width: 90%;
height: auto;
margin-left: 120px;
margin-right: 120px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.container {
position:relative;
}
.container video {
position:relative;
z-index:0;
}
.overlay {
position: fixed;
justify-content: center;
text-align: center;
top:50%;
left:50%;
z-index: 1;
transform: translate(-50%, -50%);
}
.info{
font-family: urw-form-expanded, sans-serif;
font-weight: 400;
font-style: normal;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
}

Answer 1

So you do want to use position: absolute; and use margin: 0 auto; or just margin: auto; to center the video.
You have to place the overlay inside the video container to make it work:
video {
margin: 0 auto;
}
.overlay {
position: absolute;
}
<div class="container">
<video id="video" width="770" height="882" playsinline controls autoplay muted loop>
<source src="video/Cage_Broken_Boy.mp4" type="video/mp4"/>
</video>
<div class="overlay">
<h1>CAGE THE ELEPHANT</h1>
<h2 class="info">PERFORMING
JUNE 27 7:00PM
SARATOGA PERFORMING
ARTS CENTER
</h2>
</div>
</div>
See this JSFiddle: https://jsfiddle.net/qcgv6znd/1/