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;
});

Answer 1

要强制您的宽高比超过视频的宽高比，您只需要以下fill变体object-fit：

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>