I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks:
image in question
body {
margin: 0;
}
.hero-section {
position: relative;
height: 85vh;
width: 100%;
display: grid;
place-content: center;
}
video{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
z-index: -1;
}
@media screen and (min-width: 900px) {
.hero-section {
height: 100vh;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Document</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div class='hero section'>
<video autoplay muted loop playinline src='images/uhoh.mp4'></video>
</div>
</body>
</html>
</html>