Como deixar seus vídeos responsivos

Para dimensionar vídeos para se adaptar em qualquer dispositivo, seja esse dispositivo um desktop, tablet, dispositivo móvel… podemos usar CSS ou Javascript como solução para cumprir essa meta. Os exemplos abaixo utilizei apenas soluções em CSS.

Página de exemplo

Vídeo do YouTube e Vimeo

Abaixo você encontra uma típica marcação HTML para inserir vídeos do YouTube. Note que foi criada uma div que servirá de contêiner do iframe.

<figure>
    <div class="boxVideo">
           <iframe width="420" height="315" src="http://www.youtube.com/embed/EPkAoxedliA" frameborder="0" allowfullscreen></iframe> 
    </div>
<figcaption>Exemplo de vídeo Responsivo do Youtube</figcaption>
</figure>

Abaixo exemplo de marcação HTML utilizada para inserir vídeos do Vimeo. Esse também faz uso de iframe, logo a técnica é a mesma utilizada em vídeos do YouTube.

<figure>
    <div class="boxVideo">
        <iframe src="http://player.vimeo.com/video/10230706" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/10230706">Smarty aula 1</a> from <a href="http://vimeo.com/user3121269">kadunew.com/blog</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>
<figcaption>Exemplo de vídeo Responsivo do Vimeo</figcaption>
</figure>

CSS para videos do YouTube e Vimeo

figure { width: 90%; min-width: 17.5em; margin:0 auto;}
figcaption { font: 120% sans-serif; text-align: center;}
.boxVideo {
	position: relative;
	padding-bottom: 56.25%; 
	padding-top: 25px;
	height: 0;
	margin:0 auto;
}
.boxVideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Elemento HTML5 video

Você pode querer inserir vídeos em suas páginas utilizando o elemento video da HTML5. Abaixo exemplo de como deixar seus vídeos HTML5 responsivos.

<figure>
    <video poster="videos/cover.jpg" controls>
		<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
		<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
		<source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm" />
		<p>Seu navegador não suporta o elemento video HTML5.<br /> 
		Assista o video localmente <br /> <a href="PlymouthRoadrunnerCommercial.mp4">fazendo o download</a></p>
	</video>
<figcaption>Video responsivo com HTML5 video</figcaption>
</figure>

CSS

figure { width: 90%; min-width: 320px; margin:0 auto;}
figcaption { font: 120% sans-serif; text-align: center;}
video {
	width: 100%;
	height: auto;
}

Explicando as regras acima

.boxVideo defini um tamanho mínimo para o elemento figure, ou seja, o redimensionamento do vídeo vai ocorrer até 320px, abaixo disso o vídeo não se ajusta mais ao tamanho da tela.
position: relative todos os elementos filhos vão se posicionar em relação a esse recipiente.
padding-bottom: 56.25% foi utilizada para criar uma proporção dentro do elemento figure preenchendo a altura com esse valor.

padding-top: 25px abre espaço para os controladores de vídeo.

height: 0 para retirar qualquer altura do elemento.

margin:0 auto para centralizar.

width: 90% para definir a proporção ocupada pelo contêiner na tela.

.boxVideo iframe recebe praticamente regras de posicionamento e dizemos que vai ocupar cem por cento da largura e altura do seu elemento pai.

A mesma estilização de vídeos do youTube podem ser usadas para os vídeos do Vimeo.

Criamos um vídeo responsivo inserindo um container em volta desse vídeo. Esse container deve manter as mesmas dimensões (proporção) do vídeo que na maioria das vezes é 16:9.

Aqui não podemos usar height com porcentagem, pois ela é calculada em relação ao seu elemento pai mais próximo que tenha uma altura definida. Sendo assim foi usada a propriedade padding-bottom em porcentagem que é calculada em relação a largura do próprio Box.

Resumindo: o padrão de cálculo da propriedade padding-top e padding-bottom (quando declaradas em porcentagens) é a largura do box do qual foram definidos.

O valor 56.25% foi retirado da proporção do vídeo (largura/altura igual 19:9). Dividindo 9/16 e multiplicando por 100 teremos o valor 56.25% que é a relação da largura do nosso Box.

Recomendo que leiam um artigo que fala exclusivamente sobre cálculo de proporções para vídeo.

Vídeos no Foundation

Se você utilizada o Foundation Framework em seu projeto a classe .flex-video permite deiaxr seus vídeos responsivos no Foundation. Os videos podem ser do YouTube, Vímeo, ou de qualquer site que utilize iframe, embed ou object para incorporar os vídeos.

Se você está a incorporação de um vídeo do YouTube, Vimeo, ou outro site que usa iframe, ou incorporar elementos de objeto , você pode envolver o vídeo em div.flex -video para criar uma relação intrínseca que vai dimensionar corretamente o seu vídeo em qualquer dispositivo.

Para deixas o vídeo responsivo basta envolver a marcação do vídeo com o elemento div e nessa div aplicar a classe .flex-video. Veja o exemplo abaixo:

<div class="flex-video">
  <iframe width="420" height="315"
  src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.