Video background

header.php

<?php
	if ( is_front_page() ) :
		?>
		<div class="video-container">
			<video autoplay loop poster="polina.jpg">
				<source src="<?php vulcano_images( 'bg-video.webm' ); ?>" type="video/webm">
				<source src="<?php vulcano_images( 'bg-video.mp4' ); ?>" type="video/mp4">
			</video>
		</div>
		<?php
	endif;
	?>

style.css

.video-container {
	background : url(../images/bg-home.jpg) no-repeat center center / cover;
	height     : 680px;
	left       : 0;
	overflow   : hidden;
	position   : absolute;
	right      : 0;
	top        : 0;
	width      : 100%;
	z-index    : -100;
	&::after {
		background : url(../images/overlay-video.png) repeat left top;
		bottom     : 0;
		content    : ' ';
		height     : 100%;
		left       : 0;
		position   : absolute;
		right      : 0;
		top        : 0;
		width      : 100%;
		z-index    : 2;
	}
	video {
		height     : auto;
		left       : 50%;
		min-height : 100%;
		min-width  : 100%;
		position   : absolute;
		top        : 50%;
		transform  : translateX(-50%) translateY(-50%);
		width      : auto;
		z-index    : 1;
	}
}