Video Responsivo

[wagnergos 0]

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;
}