Como deixar um vídeo responsivo (Youtube, Vímeo, etc.)

Por | Atualizado em 2017-04-29

Pretende deixar um vídeo responsivo, capaz de se adaptar automaticamente ao tamanho da página onde é exibido? É muito simples, com algumas linhas de código CSS, o problema fica resolvido.

Nos últimos tempos os Webmasters e blogueiros tem sido “desafiados” a implementar um design responsivo.

Essa mudança têm sido incentivada tanto pelos motores de busca (que valorizam páginas otimizadas para dispositivos móveis), como por serviços de anúncios como o Adsense (para respeitar os tamanhos e posicionamentos do anúncio), etc.

vídeo responsivo

Como deixar um vídeo responsivo (Youtube, Vímeo, etc.)

Para exemplificar, iremos usar um vídeo do YouTube. Este exemplo é válido para qualquer tipo de página, incluindo nas plataformas Blogger ou WordPress.

Por norma, os vídeos do YouTube são embutidos através de um iframe. Esse iframe costuma incorporar as dimensões,do vídeo, Width e height, as quais deverá apagar.

<iframe width="560" height="315" src="https://www.youtube.com/embed/rA6tP4IscU8" frameborder="0" allowfullscreen></iframe>

Agora, adicione o seguinte código à linguagem CSS da sua página:

.video-wrapper {position:relative; padding-bottom:56.25%;}
.video-wrapper iframe {position:absolute; width: 100%; height: 100%; top:0; left:0;}

O valor “56.25%” do atributo “padding-bottom” foi conseguido dividindo 9/16 do formato do vídeo (16:9). Adicione o código do iframe numa “div” que chame a classe “video-wrapper”, ou seja:

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/rA6tP4IscU8" frameborder="0" allowfullscreen></iframe></div>

Está pronto, o seu vídeo será apresentado com um design responsivo. Se ficou com dúvidas, envie o seu comentário, teremos todo o gosto em ajudar.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *