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.
