full screen background video

A hero image is good but background video can show much more information in a gentle way. Your visitors don't have to scroll through the long sections to find what you do. Instead it will showcase your business details at the beginning.

by Mukul kant

HTML

<div class="fullscreen-video-wrap">
		<video src="https://www.videvo.net/app/stream.php?id=4475" autoplay="true" loop="true">
		</video>
	</div>

CSS

* { box-sizing:border-box; }

body {
	margin:0;
	font-family:"Century Gothic";
	font-size:16px;
	line-height:1.5;
	color:#333;
	overflow-x:hidden;
}

.video-header {
	height:100vh;
	display:flex;
	align-items:center;
	color:#fff;
}

.container {
	max-width:960px;
	padding:0 10px;
	margin:auto;
	text-align:center;
}

.fullscreen-video-wrap {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	overflow:hidden;
}

.fullscreen-video-wrap video {
	min-height:100%;
	min-width:100%;
}