CODEWITHSUNDEEP
jqueryhtmlcssvideo
user6930268
user6930268

Reputation:

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 to also display full screen video mobile device also.

Please help me in this..

<div class="video-size">
<video  autoplay loop controls muted>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>

CSS

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

Upvotes: 10

Views: 40755

Answers (5)

Md Adilur Rashid
Md Adilur Rashid

Reputation: 740

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;
}

Upvotes: 19

Asim Iqbal
Asim Iqbal

Reputation: 148

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

<div class="video-size">
    <video  autoplay loop controls muted>
      <source src="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%;
}

Upvotes: 2

Jaison James
Jaison James

Reputation: 4552

I think you can use like below.

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

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10197

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-size video
{
  width: 100%;
  height: 800px;
}

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

Upvotes: 1

Michael Mano
Michael Mano

Reputation: 3440

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

Upvotes: -1

Related Questions