小编Kas*_*ian的帖子

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

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