1 reply to this topic

[Emerine]

Estou usando a tag video do html5.
Queria fazer com que meu video ficasse com o height 100%, no entanto, assim que eu uso o atributoheight, ele reposiciona ao meu video e nao aumenta ele.

O que estou a fazer de errado?

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

 

[Danilomaru]

Para o elemento <video/> ficar com uma altura de 100%, o elemento pai, neste caso <div id="video"/> tem que ter uma altura definida.

De igual forma, a altura deve ser facultada através da propriedade de CSS height.

Duas soluções podem ser implementadas, tudo depende do objetivo final:

Solução 100% x 100%

Nesta solução, o vídeo fica com a largura e altura total do seu contentor, sem respeitar o aspect ratio do mesmo.

 

 

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>