Categorias

Como criar vídeos responsivos sem HTML 5

Com o HTML 5 é fácil publicar um vídeo e torná-lo responsivo para qualquer resolução. Mas, a maior parte dos serviços de vídeo, incluindo aí o líder YouTube, não inclui uma opção de inserir vídeos como HTML 5.

Nestes casos, você continua preso às tags OBJECT e IFRAME. O resultado é que sua página inteira se ajusta para ser responsiva, mas o vídeo continua ali, do mesmo tamanho, quebrando o seu layout.

Esse problema tem solução  e é mais fácil do que parece: usando CSS.

Você irá precisar de uma <div> funcionando como container envolvendo o código do vídeo, com um valor de padding-bottom entre 50% e 60%. O truque é estabelecer uma altura de zero e um overflow oculto.

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

Os elementos filhos dentro do container devem ter largura de 100% , altura de  100%  e serem posicionados absolutamente.  Desta forma eles irão automaticamente se expandir para ocupar toda a dimensão do container, que irá variar com a resolução da tela.

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

O HTML é simples:

A dica funciona com todos os navegadores e foi testada em Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone e iPad.