Veja como deixar seus vídeos responsivo no WordPress

Os mais populares hospedeiros de vídeos  que usamos para compartilhar em blogs e sites são os famosos Youtube e Vimeo.

Quando obtemos o código para incorporar os vídeos em nossos sites eles não fornecem o padrão que precisamos.

Nesse artigo vamos mostrar como se faz para colocar vídeos do Youtube, Vimeo e outros mais no formato responsivo apenas adicionando algumas linhas no arquivo CSS do seu template atual.

Seguindo o procedimento para obter o código do vídeo através do YouTube:

1 – Obter o código de incorporar  no Youtube

1º Acesse o Youtube

2º Encontre o vídeo que deseja inserir em seu site

3º Clique em Compartilhar >> Incorporar>> Botão direito do mouse e copie o código HTML.

Codigo responsivo youtube

2- Utilize o código de incorporação

Para inserir o vídeo responsivo dentro do seu post/página WordPress, cole o código de incorporação no HTML do post do seu Blog. Ele deverá ficar exatamente como este:

<iframe width="853" height="480" src="//www.youtube.com/embed/uH5hnTeLwAA" 
frameborder="0" allowfullscreen></iframe>

 

3 – Adicionando o código responsivo no HTML

Para adicionar o vídeo em qualquer outro lugar como por exemplo dentro de uma caixa de Widget ou área html faça o seguinte:

No HTML do seu site adicione a tag div em torno do código de incorporação. Vamos usar a class CSS video-responsivo para que o seu código fique exatamente assim:

<div class = "video-responsivo" >
<iframe width = "420" height = "315" src = " http://www.youtube.com/embed/6xisazZX9bA " frameborder = " 0 " allowfullscreen > </ iframe >
</div>

 

4- Adicionando o CSS no seu Tema WordPress

Para que os vídeos fiquem responsivo dentro de suas postagens no site. Edite o arquivo style.css do seu template WordPress e adicione o seguinte código:

.video-responsivo {
overflow: hidden;
padding-bottom: 56,25%;
position: relative;
height: 0;
}
iframe .video-responsivo {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

Depois salve o arquivo.  Agora os seus vídeos vão está responsivo. Para realizar o teste, redimensione o seu navegador para vê-lo em ação dentro do seu site.

Lembre- se de adicionar as “div” do ítem 3 em suas postagens com vídeo. Qualquer dúvida é só comentar!

Comentarios (2)

    • Rodolfo,
      o css você adiciona dentro do style.css do seu tema WordPress.

      O código html você coloca onde quiser que apareça o video responsivo.

      Exemplo se você quiser que ele apareça em um Widget.

Deixe um Comentario