video does not respect predefined height and object-fit: cover in Google Chrome

Navigation
2

I'm calling a video in a parent div with the following definition: 

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

And as child element the tag <video> com: 

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

In Firefox Developer Edition it works normally, both crop object-fit and height 400px but in Chrome it does not. Or the video gets a lot louder than it should or full screen (if I use vh as drive).

Print:

    
asked by anonymous 17.12.2018 / 13:12

1 answer

0

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

Image made in Chrome! (v. 71)

Imagecodeabove:

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>
    
17.12.2018 / 13:35
Overwrite table data with DataTables Top command with php does not return the same value as the terminal