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).

Basicamente, estou à procura de uma forma de garantir que o vídeo é tão grande quanto possível, mas também nunca é cortado se a janela for redimensionada-mesmo na IE9. (Nota: i o vídeo tem que manter o seu proporção -- então não faz mal se houver barras pretas.)

Foi isto que tentei até agora.

/*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>
Parece-me que vou tentar escrever uma solução JS.

Author: captainsac, 2013-11-05
Source

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>

Http://jsfiddle.net/fHG69/

Além disso, Falta-te um ponto e vírgula depois de 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.
 15
Author: gilly3, 2015-06-10 12:46:15
(Eu sei que este é um fio antigo, mas espero que a minha resposta ajude alguém lá fora.) Na verdade, já tinhas a solução correcta. O 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 .

Finalmente, como @gilly3 disse, você precisa de um ponto e vírgula depois de {[[14]}. E, claro, você precisa remover 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.
 2
Author: DynamicDispatch, 2017-05-23 11:55:07
Deparei-me com esta resposta enquanto tentava encontrar outra coisa em vídeos sensíveis. Implementei um elemento de vídeo sensível usando um código similar. Este link pode ajudar a perceber algumas coisas. a altura é igual à largura CSS pura

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.

 0
Author: Odin13, 2017-09-19 21:31:41