How to increase Video's width without altering height?

1.2k views Asked by At

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. What I am achieveing

Here is a block that I created, this is how I want my video what I want 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 the result of my code

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.

2

There are 2 answers

1
Arsalan Khattak On BEST ANSWER

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 enter image description here

1
Sumit Kumar On

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.