Video Responsivo

Como posso botar um video full width e com uma mascara por cima? eu estou tentando mas quando redimensiona o video fica pequeno e a mascara grande.

<header>
 <div id="main">
 <div id="mask"></div>
 <div id="header">
 <a class="logo" href="#">
 <img class="img_logo" src="image/logo.png">
 </a>
 <div id="nav-menu">
 <a class="nav-link" href="#">HOME</a>
 <a class="nav-link" href="#">MENU</a>
 <a class="nav-link" href="#">MENU2</a>
 <a class="nav-link" href="#">MENU3</a>
 <a class="nav-link" href="#">MENU4</a>
 <a class="nav-link" href="#">MENU5</a>
 </div>
 <div id="cont-header">
 <div id="texto-header">
 <p class="title-header title-main">LOREM IPSUM DOLOR SIT AMET</p>
 <p class="title-header">(LOREM) - AGOSTO 00-00, 2016 – IPSUM,</p>
 <p class="title-header">AA</p>
 </div>
 <div id="fundo-preto"></div>
 </div>
 </div>
<video class="video" muted autoplay='autoplay' loop=''>
 <source src='video/video-fundo.webm' type='video/webm'>
 </video>
 </div>
	</header>

* {

	margin:0;
	padding:0;
	list-style:none;
	text-decoration: none;
	vertical-align:baseline;
	font-family: helvetica;
}

, :before, *:after {

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html, body {

	height: 100%;
	position: relative;
}

img, video {

 max-width: 100%;
}

.title {
	text-align: center;
	padding-bottom: 10px;
}

header {

	height: 100%;
	position: relative;
}

#main {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#mask {
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	position: absolute;
	z-index: 2;
}

#header {
	max-width: 1020px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 3;
}

.logo {
	float: left;
}

.img_logo {
	display: inline-block;
}

#nav-menu {
	float: right;
	display: block;
}

.nav-link {
	padding: 2.625em 1.25em 0em;
	font-size: 0.9375em;
	color: #fff;
	transition: color 300ms ease 0s;
	display: inline-block;
}

.nav-link:hover {

	color: #cf464a;
}

.video {
	width: 100%;
	left: 0;
	position: absolute;
	z-index: 1;
}

#cont-header {
	width: 70.686274509803921568627450980392%; /*721px / 1020*/
	height: 164px;
	top: 400px; /*400px*/
	left: 150px; /*150px*/
	font-size: 2.125em;
	font-weight: 700;
	position: absolute;
	z-index: 5;
}

#fundo-preto {
	width: 100%; /*721px / 721px*/
	height: 164px;
	background-color: #000;
	opacity: 0.3;
	display: inline-block;
}

#texto-header{
	position: absolute;
	z-index: 6;
	left: 50px;
}

.title-header {
	color: #fff;
	text-align: center;
}

.title-main {
	padding-top: 0.7em;
}