Vídeo HTML5 totalmente responsivo
é possível ter um HTML5 num elemento absolutamente posicionado {[[2]} que dimensiona para a largura e altura da janela para que nada seja cortado? Muitas das soluções que eu vi parecem confiar na tag <iframe>
, que eu não tenho, ou apenas redimensionar com base na largura (que eu já posso fazer).
/*CSS*/
#player-overlay {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000
z-index:999;
}
<!--HTML-->
<div id="player-overlay">
<video width="100%" video="100%" style="width:100%, height:100%">
<source src="../static/video/10s.mp4" />
<source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
3 answers
Utilizar width
e max-height
no elemento <video>
:
/*CSS*/
video {
width: 100%;
max-height: 100%;
}
<!-- HTML -->
<div id="player-overlay">
<video>
<source src="../static/video/10s.mp4" />
<source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
background-color
. Quando absolutamente posicionamento de um elemento para preencher a tela, eu prefiro definir top
, bottom
, left
, e right
em vez de height
e width
.
style="width:100%, height:100%"
no seu <video>
funciona, excepto que precisa de um ponto e vírgula Em vez de uma vírgula. (Você pode remover os atributos redundantes width="100%"
e video="100%"
.)
A razão pela qual width: 100%; height: 100%
funciona (note-se o ponto e vírgula) É que, embora o elemento <video>
seja esticado, o próprio vídeo mantém a sua proporção e é letterboxado / comprimido dentro do <video>
elemento: https://stackoverflow.com/a/4000946/5249519 .
A vantagem de height: 100%
é que o vídeo é gravado exactamente no centro, enquanto que com max-height: 100%
o vídeo está alinhado com o topo do contentor.
Além disso, você deve definir o seu <video>
para display: block
. Caso contrário, corresponde por omissão a display: inline
e obterá algum espaço em branco no fundo do vídeo para os descritores de tipos de letra: existe uma lacuna 4px por baixo dos elementos de tela / Vídeo / Áudio no HTML5 .
display: none
. =)
Aqui está a solução completa.
/*CSS*/
#player-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 999;
}
video {
display: block;
width: 100%;
height: 100%;
}
<!--HTML-->
<div id="player-overlay">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
</video>
</div>
Execute o excerto de código no modo "página completa" e redimensione a sua janela do navegador para ver o efeito de codificação.
A propósito, as tuas fontes de vídeo já não estavam a funcionar, por isso usei amostras de vídeos de: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 Espero que isso ajude.O teu código pode ser assim:
#player-overlay {
position: relative;
&:before {
content:'';
display: block;
padding-top: 50%; // 50% equals a 2:1 ratio. you can read more about
// the ratios in the link
}
}
video {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
Você pode mudar a razão simplesmente alterando o enchimento-top no pseudo elemento antes.