How to increase Video's width without altering height?

Question

I have video in my header and I want its height to be 80vh and width of 80% of a total page. Now, the problem is that when if I change the width the height also changes and if I change the height the width also changes. Below is the image of what I am getting now.

Here is a block that I created, this is how I want my video Here is my Code :

HTML :

<div id="main-container">
  <header>
    <video autoplay muted loop id="main-video">
      <source src="img/header-video.mp4">
    </video>        
</header>

CSS :

#main-container {
width: 90%;
margin: 0 auto;
}
#main-video {
    width: 100%;
    height: 100%;
}

From this code, I am getting this result

This is not duplicate copy and the reason is that my problem is with video, normal div elements work totally fine but with video, it doesn't work. It expands on its width automatically when I expand height and vice versa.

Answer 1

I find a solution to the problem. The only thing I have to do is to add object-fit: fill in case . This will stretch the video as we want.

#main-container {
    width: 90%;
    margin: 0 auto;
}
#main-video {
    object-fit: fill;
    width: 80vw;
    height: 50vh;
}

How it looks now

Answer 2

just try this css -

#main-container {
width: 80%;
margin: 0 auto; height:80vh;}

#main-video{
object-fit:cover;
width: 100%;
height: 100%;

}

this will not stretch your video and will cover the container.