HTML视频保持宽高比

Question

在发表评论之前，曾多次问过这个问题，这是一个重要方面。

我不希望video元素保持播放视频的宽高比。我希望视频元素的宽高比始终为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变体：

object-fit

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