如何将 html5 视频拉伸到全高？

Question

我有一个简单的 html5 视频播放器。我想将视频高度拉伸到用户屏幕高度。

我已经尝试了很多东西，例如这个：

     height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */

但它不起作用。这里有一个现场演示：

http://boxy2.com/testvideo.php?url=http://boxy2.com/3n9?download_token=e99fdb10c5a929aa30d0f497d07f260eb16b511503b4520a4bdd48385b048b88&ad=0

这是我的问题，当我单击全屏时它仅遵循 WIDTH 属性而不是高度。如果我删除 width:100%，即使在全屏幕上，它的大小也约为 300px 高度。

原文由 János Tigyi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS

video { height: 100vh; min-height: 100%; }

大多数视频都是 16:9 的比例，因此为了增加屏幕边缘的高度，您最终会看到裁剪视图。最接近您想要的比例是 4:3 的旧电视格式。

vh 和 vw 是布局救星，这里有更多关于 viewport height and viewport width.

原文由 zer00ne 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在使用的正确解决方案是通过 CSS 在 <video> 标签上使用 object-fit:fill 。

 video {
  object-fit: fill;
}

原文由 mindmyweb 发布，翻译遵循 CC BY-SA 3.0 许可协议