Vídeo responsivo para funcionar em pc,tablet e telemóvel

Para tornar um vídeo do YouTube responsivo e assim se adaptar em qualquer pc, tablet e/ou dispositivo móvel você pode usar CSS ou Javascript para cumprir essa meta. Este exemplo usa uma solução CSS, você precisa adicionar algum código CSS em seu arquivo CSS principal.

Criar o processo

A primeira coisa que você precisa obter é o código iframe para incorporar o vídeo YouTube, pegue ele do site YouTube. Depois crie uma “div” com a class “video-container” onde pretende mostrar o vídeo e coloque o código iframe dentro da “div” criada. A partir daqui, precisamos declarar o CSS.

<div class="video-container"><iframe.......></iframe></div>

Configurando o CSS

.video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Na primeira declaração CSS o alvo é o container do vídeo e a segundo o alvo é o recipiente, neste caso, o iframe, pode aplicar isto em objetos e elementos embed também.

O elemento mágico é a regra padding-bottom de 56,25%, esse número é alcançado usando o formato da vídeo de 16 por 9, portanto, 9 dividido por 16 = 0,5625 ou 56,25%, pode ver uma explicação completa no artigo na AListApart.

Este mesmo processo também pode ser conseguido usando uma técnica javascript que em outro artigo explicaremos…