Full screen background video

Top hero area, sized to viewport, with background cover effect.

HTML

<div class="wrapper">

	<a href="#text"><h1>Scroll Down</h1></a>
	<video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28831/Typer.mp4" autoplay loop></video>
</div>

CSS

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	margin: 0;
}

.wrapper {
	width:100%;
	height:100vh;
	overflow: hidden;
	background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.wrapper video {
	object-fit: cover;
	width:100%;
	height:100%;
}

h1 {
	font-family: sans-serif;
	color: white;
	margin: 0;
	position: absolute;
	z-index: 2;
	font-size: 15vmin;
	top:50%;
	transform:translateY(-50%);
	width: 100%;
	text-align: center;
	text-shadow:4px 4px 0 rgba(0,0,0,0.4);
	opacity: 0.5;
}

video::-webkit-media-controls {
	display:none !important;
}