Question

手机屏幕截图

在PC上截图

这是背景中的视频。

问题。
当网站全屏时，视频大小要大。我试图让它变小，边缘顶部。但它将视频减少了一半。视频必须保持全屏和小屏幕的原始条件。我该怎么做呢？

<body>

    <div id="videoContainer" class="half-black">
        <div class="videoWrapper">
            <video autoplay>
                <source src="video/warwick.mp4" type="video/mp4">
            </video>
        </div>
    </div>
    <div id="infoContainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    </div>

CSS：

    #videoContainer{
    height:auto;
    background-color:darkslateblue;
    border-bottom:5px solid black;
}
#infoContainer{
    background-color:dodgerblue;
    height:40%;
}

.videoWrapper > video {
  width: 100%;
  margin-top:-35%;


}
.videoWrapper{
  overflow: hidden;
}

Answer 1

您可以使用object-fit CSS属性将视频放入其容器中。使用，看看这是否解决了您的问题。此外，不需要保证金属性。

.videoWrapper > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

背景视频太大了

1 个答案: