背景视频太大答案

【问题标题】：Background video too big背景视频太大
【发布时间】：2017-02-10 13:38:44
【问题描述】：

手机截图

电脑截图

这是一个背景视频。

问题。
当网站全屏显示时，视频尺寸过大。我试图用 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;
}

【问题讨论】：

标签： html css video background responsive

【解决方案1】：

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

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

【讨论】：

tnx 兄弟帮了大忙！