Height on video Html5

Question

I’m using the tag video of Html5.
I wanted to make my video with the height 100%, however, so I use the attribute height, it repositions to my video and does not enlarge it.
I wanted to make a menu right below the video like this website

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

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

Answer 1

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

Similarly, the 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 gets the total width and height of your container, without respecting the Aspect ratio of the same.

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 the Aspect ratio

In this solution, the video does not "stretch" or "shrink", it keeps its 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>