How To Change Height Of The Video In Html Css?

I have to display video on my page with 100% width and 400px or 500px height whenever i am changing the height of the video it also changing the width that i don't want. and i have

Solution 1:

Hope this will resolve the aspect ratio problem.

HTML:

<video autoplay muted loop id="myVideo">
    <source src="videos/Raindrops.mp4"type="video/MP4">
</video>

CSS:

#myVideo {
    width: 100%;
    height: 600px;
    object-fit: cover;
    z-index: -100;
}

Solution 2:

This might be helpful For reference: https://jsfiddle.net/gyx94wqj/

<div class="video-size">
    <videoautoplayloopcontrolsmuted><sourcesrc="http://techslides.com/demos/sample-videos/small.mp4"type="video/mp4"></video></div>

.video-size {
    height:400px;
    width:100%;
    overflow:hidden;
}
.video-size > video {
    min-width: 100%;
    min-height: 100%;
}

Solution 3:

This is not possible because this css will technically stretch the video which is not possible.

You can change the size of video but only with aspect ratio. If you forcefully change the height it will leave blank spaces at top and bottom.

.video-sizevideo
{
  width: 100%;
  height: 800px;
}

I have given height to video forcefully and see the example with black spaces : https://jsfiddle.net/ohk8w0s0/

Solution 4:

I think you can use like below.

.video-size
{
  width: 100%;
  height: 400px;
}
.video-sizevideo{
  width:100%;
  height:100%
}

Solution 5:

.video-size
{
  width: auto;
  height: 400px;
}