Having trouble troubleshooting a margin error that won't go away? I've attempted adjusting the margin and padding values to 0, but the line persists. Should I consider resizing the video?
I placed the background video within a div tag. Is the video not aligning correctly?
https://i.sstatic.net/XLhZ5.png
/* Code snippet to manage video display */
#video{display:none}
/* Default image display 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%;}
}
/* Display video, hide image if screen size is 992 pixels or more */
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}
/* Text container styles */
#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>