Margin White Stripe - html

Question

Im having trouble getting rid of what it appears to be a margin error?...i've already tried setting margin and padding values as 0 but i keep getting that line, should i downsize the video or something?
I inserted the background video on a div tag. Is the video just out of place?
/* Default to hide the video on all devices */
#video{display:none}
/* Default to display the image on all devices */
#videosubstitute{display:block;width:auto;height:100%;}
html, body {
height: 100%;
margin: 0;
}
/*START VIDEO
==================================================*/
#fullScreenDiv{
width:100vh;
min-height: 100vh;
/* Set the height to match that of the viewport. */
height: 100vh;
width: auto;
padding:0!important;
margin: 0!important;
background-color: black;
position: relative;
}
#video{
width: 100vw;
height: auto;
object-fit: cover;
left: 0px;
top: 0px;
z-index: 1;
volume: .02;
}
#media (min-aspect-ratio: 16/9) {
#video{
height: 150%;
top: -100%;
}
#videosubstitute{
display:block;
width: 100%;
height: auto;}
}
#media (max-aspect-ratio: 16/9) {
#video {
width: 150%;
left: -100%;
}
#videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992 pixels or more, then display the video but hide the image*/
#media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}
/* The container for our text and stuff */
#messageBox{
position: absolute; top: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
}
/*END VIDEO
==================================================*/
<div id="fullScreenDiv" class="table-cell">
<img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video"></img>
<div id="videoDiv">
<video preload="preload" id="video" autoplay="autoplay" loop="loop">
<!-- Note: Replacing the following sources that are local:
<source src="img/mc10.webm" type="video/webm"></source>
<source src="img/mc10.mp4" type="video/mp4"></source> -->
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
</video>
</div>
</div>

Answer 1

This line seems off:
width:100vh;
vh means percent of the screen height. Probably a bad idea to use that as width.
Are you really sure you want the video to be cut off at the sides of the screen? Wouldn't it be better to have a black background and let the video fill the available space without stretching? E.g. fill: contain