边缘白色条纹

Question

我无法摆脱它看起来像是一个保证金错误？...我已经尝试将保证金和填充值设置为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>

Answer 1

此行似乎已关闭：

width:100vh;

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

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