调整 HTML 视频以适应父容器的高度 * 和 * 宽度

Question

我已经阅读了很多关于调整视频大小以适应浏览器 and/or 父元素的 SO 帖子，但是其中 none 满足了我的需要。我有一个带有 overflow: hidden 的单页应用程序，因此该应用程序不会滚动。 该应用程序有各种 display:flex 容器，在其中一个容器中我想要一个 16x9 的视频。 我希望整个视频始终适合其容器（因此，如果容器太宽，top/bottom 上会有条，如果容器太高，left/right 上会有条）。我可以在视频上使用 width: 100% 使其根据容器宽度调整大小，但我想不出任何方法让它在容器高度变小时缩小以适合。 （我猜这是因为大多数网页都是垂直增长的，所以基于高度的限制不太重要。）

我发现，至少在 Chrome 上，video 标签不允许 height 是百分比，不幸的是，W3C 规范同意这一点.我试过 和 padding-bottom: 56.25% 的相对定位视频包装器，然后将绝对定位的视频放入其中，但是当容器太长时它仍然会切断视频的底部宽

这是一个 jsfiddle；在那里看到比写起来容易：https://jsfiddle.net/darkstarsys/q1fr9jwd/2/ 在那里，您会看到视频对其容器的宽度做出正确反应，但当高度较小时，视频的底部会被截断。调整 main 元素的高度和宽度，看看它对容器大小有何反应。

如果可能，我想避免使用基于 Javascript 的解决方案；似乎 CSS 应该能够以某种方式做到这一点。

Answer 1

我不确定这是否是您想要的，但请尝试一下：

.main {
  /*overflow: hidden;*/
  
  /* TRY ASPECT RATIOS HERE 
  800w x 300h doesn't work -- bottom gets cut off */
  width: 800px;
  height: 300px;
  background: red;
}
.video-wrapper {
  display: flex;
  height: 100%;
}
.video {
  width: 100%;
  height: auto; /* spec says no percent allowed here */
}