Looking at the image I've attached, it's clear that the video is not covering the full width as desired. Can someone pinpoint where I'm making a mistake? Here is the image for reference: Image of the div and video
Here's the snippet of code I'm working with:
HTML
<section class="content-2">
<div class="fullscreen_bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg_video">
<source src="images/Ajvar.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></div>
</section>
CSS
.content-2 {
height: 350px;
overflow: hidden; }
.fullscreen-bg {
max-height:350px;
width: 100%;
height: 100%;
position: relative;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: -100;
background-size: cover;
overflow: hidden;}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}