<video> does not respect preset height and Object-fit:cover in Google Chrome

Question

I’m calling a video on a father div with the following definition:

div {
    width: 100%;
    height: 400px;
}

And as child element the tag <video> with:

video {
    height: 400px;
    width: 100%;
    object-fit: cover;
    background-color: #000;
}

In Firefox Developer Edition works normally, both the Crop’s object-fit as to the height of 400px but not in Chrome. Either the video gets much louder than it should or in full screen (if I use vh as a unit).

Print:

Answer 1

What happens is that your video is extrapolating the measure of container. One way to solve this is by putting overflow:hidden in the container

Image made in Chrome! (Vr. 71)

Image code above:

div {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

video {
    height: 400px;
    width: 100%;
    object-fit: cover;
    background-color: #000;
}

<div>
    <video controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
</div>