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.

@PraveenKumarPurushothaman, I have added an explanation. Please check it out. — Arsalan Khattak, Jun 26 '18 at 14:17
I have reopened the question bro... Good luck getting answers... — Praveen Kumar Purushothaman, Jun 26 '18 at 14:26
There is a tendency for video tags to maintain their aspect ratio. By default they have `object-fit:contain` which makes a video stretch to the edge of its container then stop before it gets cropped. This is optimal behavior because it is at its maximum dimensions without any cropping or stretching. So if you want to exceed the video's natural dimensions then expect cropping or stretching. BTW what is the 2nd image supposed to be? — zer00ne, Jun 26 '18 at 14:42
@zer00ne There isn't any second image, a new section starts after the video. — Arsalan Khattak, Jun 26 '18 at 15:09

score 1 · Accepted Answer · answered Jun 27 '18 at 05:51

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

answered Jun 27 '18 at 05:51

Arsalan Khattak

768
2
8
16

To not destroy the quality of the video you can add object-fit : cover instead of fill – Lal Mar 25 '23 at 06:33

score 0 · Answer 2 · answered Jun 27 '18 at 05:59

0

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.

answered Jun 27 '18 at 05:59

Sumit Kumar

493
2
5
16

That doesn't work quite well. 10vh height gives like 20vh height. – Arsalan Khattak Jun 27 '18 at 17:24

How to increase Video's width without altering height?

2 Answers2