In Html page

Question

In Html page <video> tag, I want to increase height. Even-though I use !important style attribute.

I tried to increase the video height but it is not getting increased.

video {
  height: 400px !important;
}

.div2 {
  height: 400px;
  background: #6f7a2a;
}

<div class="row div2">
  <video autoplay muted loop style="width:360px !important;">
    <source src="video/Australia.mp4" type="video/mp4">
  </video>
</div>

Possible duplicate of [Full Screen HTML5 Video Background without JS](https://stackoverflow.com/questions/34949387/full-screen-html5-video-background-without-js) — Kaiido, Dec 26 '17 at 07:55

score 1 · Accepted Answer · answered Dec 26 '17 at 07:32

Once try this, its working for me as per your question

css

.video-size {
height:500px; /* Height option for changing*/
width:360px;
overflow:hidden;
}
.video-size > video {
min-width: 100%;
min-height: 100%;
}

html

<div class="video-size">
<video autoplay muted loop>
<source src="video/Australia.mp4" type="video/mp4">
</video>
</div>

score 0 · Answer 2 · answered Dec 26 '17 at 07:07

0

<div class="row div2" >
    <video autoplay muted loop width="360" height="400" >
    <source src="video/Australia.mp4" type="video/mp4">
    </video>
</div>

Try doing like this .. remove style attribute and add attributes height and width as shown above

answered Dec 26 '17 at 07:07

Pranav Deshpande

168
8

@SivaKumar REMOVE ALL OTHER VIDEO STYLING like style tag and `video{ height:400px !important }` remove that and try – Pranav Deshpande Dec 26 '17 at 07:21

score 0 · Answer 3 · edited Dec 26 '17 at 07:19

0

use something like id or class

#video_id {
  height: 400px !important;
  width: 360px !important;
}

.div2 {
  height: 400px;
  background: #6f7a2a;
}

<div class="row div2">
  <video id="video_id" autoplay muted loop>
    <source src="video/Australia.mp4" type="video/mp4">
  </video>
</div>

edited Dec 26 '17 at 07:19

Sankar

6,908
2
30
53

answered Dec 26 '17 at 07:08

Laxmi

3,830
26
30

score 0 · Answer 4 · answered Dec 26 '17 at 07:19

0

    
.div2
{
height: 400px;
background: #6f7a2a;
}

<div class="row div2" >
 <video autoplay muted loop style="height:100%;" >
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
 </video>
</div>

answered Dec 26 '17 at 07:19

Nims Patel

1,048
9
19

score 0 · Answer 5 · answered Dec 26 '17 at 07:39

0

Use transform to maintain aspect ratio. For example

video {
  transform: scale(3);
  background: #6f7a2a;
}

<video autoplay muted loop>
  <source src="video/Australia.mp4" type="video/mp4">
</video>

answered Dec 26 '17 at 07:39

Shreevardhan

12,233
3
36
50

In Html page tag I want to increase height But not increased

5 Answers5

In Html page