Video on background in header

index.html

<!--START HEADER-->
<header class="header">
	<div class="header__video-wrap">
		<div class="header__overlay"></div>
		<video class="header__video" loop="" muted="" autoplay="">
			<source src="<?=SITE_TEMPLATE_PATH?>/video/xo-1.mp4" type="video/mp4">
			<source src="<?=SITE_TEMPLATE_PATH?>/video/xo-1.webm" type="video/webm">
		</video>

	</div>

	<div class="header__container container">
		//content
	</div>
</div>

style.css

.header {
  position: relative;
  overflow: hidden;
}

.header__overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 5;
   background-color: rgba(0, 0, 0, .7);
}


.header__video-wrap {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.header__video {
  min-height: 100%;
  min-width: 100%;
}