Height in video html5

Question

Height in video html5

Navigation

#1 by (5 votes)

4

I'm using the html5 video tag. I wanted to make my video 100% height , however, as soon as I use the height attribute, it repositions to my video and does not increase it. > I wanted to make a menu just below the video like this site

In the same way but with different effects. What am I doing wrong?

 <div id="video" >
       <video src="video/League-warrios.mp4" width="100%" height="100%" loop/>
 </div>

html5 video

asked by anonymous 08.04.2015 / 16:56

1 answer

Send array by GET Get values row table

score 5 · Accepted Answer

For the <video/> element to have a height of 100%, the parent element, in this case <div id="video"/> , must have a defined height.

Likewise, height should be provided through the CSS property height .

Two solutions can be implemented, everything depends on the ultimate goal:

100% x 100% Solution

In this solution, the video is the width and total height of your container, not respecting the aspect ratio .

body {
    margin: 0;
    background: #000;
}
#video {
  width: 100%;
  height: 100%;
}
video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transition: 1s opacity;
}
#rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  padding: 10px 20px;
  text-align: center;
  line-height: 20px;
}

<div id="video">
  <video width="100%" height="100%" loop autoplay>
    <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" />
    <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
  </video>
</div>
<div id="rodape">Meu Rodapé</div>

Solution preserving aspect ratio

In this solution, the video does not "stretch" or "shrink", it keeps your aspect ratio intact.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#video {
  width: 100%;
  height: 100%;
}
video {
  height: 99%;
  width: 100%;
  background-color: #000;
}
#rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  padding: 10px 20px;
  text-align: center;
  line-height: 20px;
}

<div id="video">
  <video width="100%" height="100%" loop autoplay>
    <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" />
    <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />
  </video>
</div>
<div id="rodape">Meu Rodapé</div>