Background Video, Always Scale-to-height, Crop Width if Needed - html

Question

Apologies if this has been asked before, but I've been checking quite a few other related threads and they've not been exactly what I'm looking for.
So I have a 1280x720 video that I was hoping to make my page's video background. I want it to scale to fit viewport height at all times, but NOT change aspect-ratio.
So this means that if the viewport ends up wider than 16:9, then I can have black-bars/letterboxing on the sides.
But if the viewport is narrower than 16:9, the sides of the video are cropped (I'm fine with this, as all important parts of the vid are in the center).
How would you suggest I do it? It's been driving me crazy.

Answer 1

I had the same issue earlier. This is how I resolved it.
.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}
The code is straight forward.

Answer 2

Well, without a working example it is hard to give a suggestion that will definitely work but here may be something that will send you in the right direction.
Create a wrapper around the video that has an absolute position and use flexbox to center the contents (the video) in the center of the page, then give it a black background. You can do that with something like this:
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}
You may need to play around with the CSS for the video perhaps like this:
video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}
Something like that should give you the results you are looking for, or at least close to them. (I did not test this though)
Hope this at least gives you some ideas if it does not work. In the future, it is best to add your current code to make it easier for us to see what you have actually tried.