Dica: vídeos embed responsivos

Muitos sites atualmente estão sendo lançados já com a função de responsividade, ou seja, eles se adaptam a vários tamanhos de telas diferentes, facilitando a navegação em smartphones, tablets ou computadores. Mas em alguns casos os vídeos embed do YouTube ou Vimeo – aqueles que embutimos nos posts ou páginas do site – não ficam responsivos. Estes vídeos precisam de atributos de altura e largura para serem exibidos no melhor formato possível em relação a largura do local onde ele será embutido no site. Quando acessamos o site através de um celular ou tablet e o tema se ajusta para aquela tela, contudo, os vídeos não se ajustam pois eles tem a altura e a largura definidas no código – o que acaba com a “graça” do seu site responsivo. Existe uma solução bem simples para isso, basta inserir um pedaço de CSS na folha de estilo do seu site e embutir os vídeos dentro de uma DIV pré-definida e sem as medidas.

Veja na prática como ter vídeos embed responsivos:

1. Insira este trecho de CSS na sua folha de estilos do site e salve as alterações

 
.embed-container { 
 position: relative; 
 padding-bottom: 56.25%; 
 height: 0; 
 overflow: hidden; 
 max-width: 100%; 
 height: auto;
 margin-top: 30px;
 margin-bottom: 30px; 
} 
.embed-container iframe, .embed-container object, .embed-container embed {
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
}

2. Vá ao YouTube ou ao Vimeo e copie o código de embed do vídeo desejado, exemplo:

<iframe width="420" height="315" src="//www.youtube.com/embed/ecirRN_b0aY?rel=0" frameborder="0" allowfullscreen>
</iframe> 

3. Cole este código no seu post ou página onde deseja embutir o vídeo:

 
<div class="embed-container"> 
INSERIR AQUI O EMBED COPIADO NO PASSO 2  
</div>

Na linha 2 acima você vai inserir o código que copiou no YouTube e irá remover os atributos “width” e “height” ficando com algo similar a isto:

 
<div class="embed-container"> 
<iframe src="//www.youtube.com/embed/ecirRN_b0aY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Pronto! Agora o resultado será um vídeo que se ajusta à dimensão da tela automaticamente. Experimente redimensionar a janela do seu navegador, o vídeo abaixo vai acompanhar o novo tamanho. Curta o som!

PS.: também funciona para vídeos do Facebook, basta copiar o código de incorporação do Facebook e remover os parâmetros “height” e “width” da mesma forma que é explicado acima.

21 comentários em “Dica: vídeos embed responsivos”

  1. Excelente! Parabéns por sua dedicação e disponibilidade para além do simplesmente retorno financeiro. Deus o abençoe grandemente.
    07.02.2016

  2. Perfeito, único site que funcionou como eu esperava! Percebi que o seu funcionou porque não inseriu o padding-top no container como outros sites demonstram. Enfim, obrigado.

    Obs: Boa música!

  3. Olá, amigo.

    Estou com este problema em um tema WordPress que comprei recentemente. Sou leigo quanto ao CSS. Gostaria de saber em qual lugar exatamente eu colo o prímeiro cógido fornecido por você referente a folha de estilos (CSS)?

    Um abraço.

    Igor

    1. Procure pelo style.css do seu tema ou se preferir instale um plugin de Custom CSS. Em muitos temas pagos existe a opção de colocar códigos extras de CSS nas opções de configuração do tema, veja se isso é possível no seu. Abs!

  4. Olá! Fiz tudo direitinho e, quando testei em meu navegador, deu tudo certo. Porém, quando passei para (a página style.css e a página dos vídeos) a web, não funcionou, pois os players ficaram bem pequenos. Você sabe dizer o que pode ter acontecido? Muito obrigada.

    1. Com certeza você está errando em alguma coisa no CSS, provavelmente a versão web está com o link errado para a a sua “folha de estilos” (arquivo .css). Verifique isso com atenção.

Deixe uma resposta