Video loop 100% browser height & width - html

Question

I'm trying to insert a video loop that displays at a responsive 100% height & width as the browser window is resized to fit .stage-0. Currently the video does not fit 100% height & width and #overlay is moved over to the right rather than sitting center? Any help as to how to create this effect would be greatly appreciated :-)
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-size: 1em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
html,
body {
height: 100%;
}
a {
background: transparent;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: .3s color;
transition: .3s height;
}
header {
position: fixed;
height: 60px;
width: 100%;
}
.header-wrapper {
width: 100%;
height: 100%;
background: transparent;
}
.header-bg,
.header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.header-bg {
color: gray;
background: white;
border-bottom: 1px solid black;
transition: .3s height;
height: 0;
}
.header-content {
margin-left: auto;
margin-right: auto;
transition: .3s color;
color: white;
background: transparent;
height: 60px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
ul {
width: 100%;
text-align:center;
}
li {
padding-top: 15px;
display: inline-block;
*display: inline;
/*IE7*/
*zoom: 1;
/*IE7*/
margin-right: 50px;
}
.navBarLinks {
margin-left: auto;
margin-right: auto;
color: inherit;
cursor: pointer;
font-size: .8em;
letter-spacing: 0.05em;
transition: .3s color;
padding-top: 15px;
line-height: 31px;
}
.instagram {
margin-left: auto;
margin-right: auto;
float: left;
padding-left: 2%;
}
.home {
left: 50%;
position: absolute;
transform: translate(-50%);
}
.insticon {
margin-left: auto;
margin-right: auto;
float: right;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
fill: white;
font-size: .8em;
letter-spacing: 0.05em;
padding: .05px 10px;
}
#media only screen and (max-width: 583px) {
.find {
display: none;
}
}
.hamburger {
margin-left: auto;
margin-right: auto;
float: right;
padding-right: 3%;
}
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
}
.header-wrapper #toggle-menu span {
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
background: #fff;
}
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
content {
height: 2000px;
background: orange;
}
.stage {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background: white;
border-bottom: 1px solid black;
font-size: 48px;
height: 200px;
width: 100%;
}
.stage-0 {
display: flex;
background: grey;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
}
#overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
color: #FFF;
text-align: center;
font-size: 20px;
width: 100%;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -999;
overflow: hidden;
}
/*promo video scroll*/
.arrow-bounce {
padding: 5%;
color: white;
left: 50%;
font-size: 26px;
cursor: pointer;
position: absolute;
transform: translate(-50%);
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
<header>
<div class="header-wrapper">
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li class="instagram">
Find me on
<a href="" class="navBarLinks in">
<svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<style type="text/css">
.st0 {}
</style>
<path class="st0" d="M50.1,121.7H28.8V53h21.4V121.7z M39.4,43.6c-6.8,0-12.4-5.6-12.4-12.4s5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C51.8,38,46.3,43.6,39.4,43.6z M130.1,121.7h-21.3V88.3c0-8-0.1-18.2-11.1-18.2
c-11.1,0-12.8,8.7-12.8,17.6v34H63.5V53H84v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7
C130.1,84,130.1,121.7,130.1,121.7z" />
</svg>
</a>
</li>
<li class="home">Logo
</li>
<li class="hamburger">
<a href="" id="toggle-menu" class="navBarLinks">
<span id="top" class="burger"></span>
<span id="middle" class="burger"></span>
<span id="bottom" class="burger"></span>
</a>
</li>
</ul>
</div>
</div>
</header>
<content>
<div class="stage stage-0">
<div id="overlay">Overlay Placeholder! </div>
<div id="arrow">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns= "http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>
</span>
</div>
<video class="media-player" loop autoplay src="http://ak9.picdn.net/shutterstock/videos/6236564/preview/stock-footage-cybernetic-brain-zooming-through-eye.mp4">
</video>
</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

Answer 1

Add the following code in your video tag:
style="width: 100%;height: 1500px;object-fit: cover;"
That should make it work :).