How to get a video element to act like background-size: cover scoped within a parent element.
<section class="container">
<video class="fullscreen" src="blurry-trees.mov" playsinline autoplay muted loop>
</video>
<div class="content">
<h1>Headline</h1>
</div>
</section>video.fullscreen {
position: absolute;
z-index: 0;
object-fit: cover; // this is the key
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&::-webkit-media-controls {
display:none !important;
}
}
.container {
position: relative;
display: grid;
place-items: center;
height: 70vh;
width: 70vw;
margin: 0 auto;
background: #ccc;
}
.content {
z-index: 1;
}See the Pen CSS Video Background Cover by Kevin Dees (@kevindees) on CodePen.
