HTML视频保持纵横比

Question

在评论之前，这个问题已经被问了几次，但这里有一个重要的方面。

我不想让视频元素保持播放视频的宽高比。我希望视频元素始终具有19:6的宽高比，即使所播放的视频具有21:9或4:3的宽高比。

我的尝试：
HTML:

<main>
    <div class="main-container">
        <div class="video-container">
            <video class="video" controls="" src="..." poster="..."></video>
        </div>
    </div>
</main>

CSS：

main {
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 76px - 55px);
    background: black;
}

main .main-container {
    margin: 0 10%;
    padding: 0;
    width: 80%;
    height: 100%;
    background: black;
    display: float-root;
}

main .main-container:after {
    clear: both;
}

main .main-container .video-container {
    margin: 0;
    padding: 0;
    width: 75%;
    height: 100%;
    float: left;
    display: inline-block;
}

main .main-container .video-container .video {
    margin: 25px 50px 25px 0;
    padding: 0;
    width: calc(100% - 50px);
    max-height: calc(100% - 50px - 130px);
    object-fit: contain;
    outline: none;
}

JS:

window.addEventListener("resize", function(e) {
    var video = document.getElementsByClassName("video")[0];
    var width = video.offsetWidth;
    var height = width * 0.5625;
    video.style.height = height;
});

- Kaskorian

---

现在，你的代码出了什么问题？你有什么问题要问吗？ - Teemu

它不起作用。它保持了播放视频的纵横比。 - Kaskorian

就像我在第一句话中解释的那样，我希望视频元素始终保持16:9的宽高比，直到达到最大高度。 - Kaskorian

你的浏览器支持情况如何？ - Dejan.S

支持什么？请提供更多细节。 - Kaskorian

浏览器，比如说你需要支持IE11吗？但对象适应性在IE11上不起作用，那么你就需要为此提供备选方案或者填充插件。这将影响解决此问题的方案。 - Dejan.S

Answer 1

要强制调整视频比例，只需使用object-fit的fill变体即可：

video {
  width: 200px;
  height: 500px;
  object-fit: fill;
}

<video src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" controls muted autoplay></video>

- Kaiido

---

这不是我想要的。当我播放 4:3 视频时，它保持宽高比为 4:3，当最大高度未达到时也是如此。如果达到了最大高度，它会拉伸视频，这也不是我想要的。播放的视频应该使用 object-fit: contain 保持其宽高比，视频元素也应该保持 16:9 的宽高比。 - Kaskorian

所以你想让容器保持16/9的比例，同时视频内容保持其宽高比？确实这个问题已经被问过很多次了，对于第二部分来说，这是默认行为... - Kaiido

应该很简单。但问题是：为什么高度不是由JS脚本设置的？ - Kaskorian

因为 CSS 的 height 属性需要一个单位 (px)。 - Kaiido