背景视频太大

Question

phone

上的屏幕截图

PC 上的屏幕截图

这是一个背景视频。

问题。
当网站全屏时视频尺寸太大。我试着用 margin top 让它变小。但它把视频切成两半。视频必须在全屏和小屏幕上保持原始状态。我该怎么做呢？

<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;
}

背景视频太大

Background video too big

html

css

video

background

responsive