Problems with Position:Absolute and Video - html

Question

I'm currently working on website for a video producer. He would like to have his demo reel running in the background when you go to his webpage. I'm trying to create a few div elements that will that will be over the video. They will actually right at the top of the webpage, acting sort of like a navbar, but not really.
Here is the code I'm working with. Of course, you won't be able to see the content when it is run, but maybe I have a mistake some where.
.background-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
background: #353030;
}
#video-background {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: 500;
height: 500;
z-index: 100;
}
#header-container {
position: relative;
display: inline;
z-index: 200;
}
.header-item {
color: white;
letter-spacing: 3px;
text-align: center;
position: absolute;
<div class="background-wrap">
<video width="1700" height="956" autoplay muted loop id="video-background">
<source src="img/reel.mp4" type="video/mp4">
<source src="img/reel.webm" type="video/webm">
<source src="img/reel.ogv" type="video/ogg">
Sorry, your browser doesn't support HTML5 video.
</video>
<div class="row" id="header-container">
<div class="col-md-4">
<div class="header-item">
<h1 id="title">Josh Kelley</h1>
</div>
</div>
<div class="col-md-4">
<div class="header-item">
<h3 id="subtitle" href="https://vimeo.com/204080098" target="_blank">Video Production & Photography</h3>
</div>
</div>
<div class="col-md-4">
<div class="header-item">
<a id="subtitlebutton1" href="#about" class="btn btn-dark btn-lg">About Me</a>
</div>
</div>
</div>
</div>
My biggest problem is when I change my .header-item to position:absolute.
When I inspect the element with developer tools the content is smashed below the video above. You can even see the About Me button is halfway showing.
Here is what it looks like when #header-container changed to position:relative and delete the position css property off .header-item.
I've marked in RED where I want the elements to go. Any help would be amazing.

Answer 1

Sorry I haven't enough time to provide you with complete solution, but:
.background-wrap {
position: relative;
width: 100%;
height: 100%; /*this has effect of 0px in your case*/
overflow: hidden; /*this hides everything that doesn't fit to the container size*/
top: 0;
left: 0;
background: #353030;
}
Here you specified height: 100% but 100% of what? Its a top level element and you set it's child's position to absolute. So the computed height is 0. It would be ok in other cases, but you've set the overflow to hidden...
As I understand, this is why you see nothing when you set the position to absolute.
You should fix all of your sizes keeping in mind that they don't grow to their children's sizes if those children are absolute positioned. After that check your bootstrap's default configurations (is it static by default, is it inline or block and so on).