Background video that fits its parent element

This solution to have a looped muted background autplaying video does not require any JavaScript. Adapt it to suit your needs.

Here’s the HTML:

					
<div class="video-parent">
	<div class="video">
		<video autoplay="autoplay" loop="loop" muted="muted" preload="auto">
			<source src="video.mp4" type="video/mp4" />
		</video>
	</div>
</div>					
				

And here’s the CSS:

					
div.video-parent {

	background-position: center center;
	background-size: cover;
	padding-top: 200px;
	padding-bottom: 240px;
	position: relative;
	background-image: url('video-background.jpg');

}

div.video-aprent div.video {

	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;

}

div.video-aprent div.video video {

	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2;

}					
				

Note: it also uses a background image that displays until the video loads.