html - 背景视频，始终缩放到高度，如果需要裁剪宽度

Question

如果之前有人问过这个问题，我深表歉意，但我已经检查了很多其他相关主题，但它们并不是我正在寻找的。

所以我有一个 1280x720 的视频，我希望它能成为我页面的视频背景。我希望它始终缩放以适应视口(viewport)高度，但不改变纵横比。

所以这意味着如果视口(viewport)最终比 16:9 宽，那么我可以在两侧设置黑条/宽边。

但如果视口(viewport)窄于 16:9，则视频的两侧会被裁剪(我对此没有意见，因为视频的所有重要部分都在中心)。

你会建议我怎么做？这让我发疯。

Answer 1

我之前遇到过同样的问题。我就是这样解决的。

.containervideo {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0px;
  top: 0px;
  overflow: hidden;
}

代码很简单。