<style>
.first {
position:relative;
display: flex;
min-height: 400px;
align-items: center;
}
.first .centered {
color:#fff;
z-index:2;
width:100%;
text-align:center;
z-index:2;
}
.first .video-box {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index:1;
}
.first .video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="first">
<div class="video-box">
<video class="video" autoplay="autoplay" loop="loop" preload="auto">
<source src="header_video.mp4" type="video/mp4">
</video>
</div>
<div class="centered">
<button onClick="document.getElementsByTagName('video')[0].play();this.remove();">Start</button>
</div>
</div>