<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yoga </title>
<style>
.video {
filter:brightness(40%);
width: 100%;
height: 750px;
object-fit: fill;
z-index: -1;
}
@media (max-width:768px){
.video {
filter:brightness(40%);
width: 100%;
height: 650px;
object-fit: fill;
z-index: -1;
}
}
</style>
</head>
<body>
<section class="head">
<video autoplay="true" loop="true" muted class="video">
<source src="images/istockphoto-1305960252-640_adpp_is.mp4" type="video/mp4">
</source>
</video>
</section>
</body>
</html>
why there is a gap between video and end of screen
there is a litter space between the video and actual edge of the window, I want the video to stretch the full width with no white space, can someone assist me with this?