scale HTML5 Video and break aspect ratio to fill whole site

Question

I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill th

Answer 1

this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact

If you want the video to fill the size of the element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

I hope this can be of help for some people.

EDIT: works in most browsers but IE