HTML Video keep aspect ratio

Question

Before comments come out that this question has been asked several times, here an important aspect.

I dont't want the video element to keep the aspect ratio of the played video. I want the video element to always have an aspect ratio of 19:6, also if the played video has an aspect ratio of 21:9 or 4:3.

What I tried:
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;
});

Now, what is going wrong with your code? What is your question? — Teemu, Jan 28 '20 at 06:13
It's not working. It keeps the aspect ratio of the played video. — Kaskorian, Jan 28 '20 at 06:14
Like I explained in the first sentence. I want the video element to always keep an aspect ration of 16:9 until it reaches the max-height. — Kaskorian, Jan 28 '20 at 06:17
Browser, like do you need to support IE11? Object fit wont work for that and then you need to have a fallback or polyfill for it. It will affect the solution for this issue. — Dejan.S, Jan 28 '20 at 06:56

score 5 · Answer 1 · answered Jan 28 '20 at 06:16

5

To force your aspect ratio over the one of the video, you just need the fill variant of 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>

answered Jan 28 '20 at 06:16

Kaiido

123,334
13
219
285

That's not what I want. When I play a 4:3 video it keeps the aspect ratio 4:3 when the max-height is not reached. If it's reached it stretches the video which is also not what I want. The played video should keep it's aspect ratio with `object-fit: contain` and the video element should also keep the aspect ratio of 16:9. – Kaskorian Jan 28 '20 at 06:22
So you want the container to be 16/9 and the video content to keep its aspect ratio? Indeed this must have been asked many times already, and for the second part it's the default behavior... – Kaiido Jan 28 '20 at 06:26
It should be simple. But the question is: why isn't the height set by the JS-Script – Kaskorian Jan 28 '20 at 06:29
2

Because CSS `height` requires an unit (`px`) – Kaiido Jan 28 '20 at 06:31

HTML Video keep aspect ratio

1 Answers1