html - 边缘白色条纹

我无法摆脱似乎是边距错误的内容吗？...我已经尝试过将边距和填充值设置为0，但我一直保持这一行，是否应该缩小视频尺寸？

我在div标签上插入了背景视频。视频刚刚放错地方了吗？

    /* 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>

最佳答案

这行似乎关闭了：

width:100vh;

vh表示屏幕高度的百分比。将其用作宽度可能不是一个好主意。

您确定要在屏幕的两侧剪切视频吗？将背景设为黑色并让视频填充可用空间而不会拉伸会更好吗？例如。 fill: contain

关于html - 边缘白色条纹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46535107/