Youtube responsivo no blogger | Blog do Joanir -->

Youtube responsivo no blogger

segunda-feira, 20 de junho de 2016
Veja como deixar a box de vídeos incorporados do Youtube responsiva no seu blog. O processo é simples, bastando apenas você criar uma class e configurá-la.

Youtube: incorporação responsiva
Youtube: incorporação responsiva

Atualmente, muita gente está acessando a internet pelo celular, Isso é fato. O blogueiro que não ajustar seu blog para isto estará em desvantagem, já que ver um site não responsivo no celular é uma verdadeira sofrência. Deixar a página leve e que se adapta a qualquer tamanho de tela é obrigação de todos nós.

Levando isso em consideração, devemos pensar também nos vídeos que colocamos nos nossos posts. Ele deve ser fácil de ser clicado e assistido. Incorporar vídeos do Youtube é uma ótima opção, mas não sei porque ainda a Google não pôs a mão na consciência de criar uma box responsiva pra isso. No caso, se você incorporar um vídeo no seu post com largura de 560px,  mesmo que seu blog seja responsivo, a box do Youtube permanecerá com essa largura numa tela pequena. Ponto negativo pra Google, que presa tanto por conteúdo responsivo no seus mecanismos de busca.

Mas, se a Google não resolve isso, a gente dá um jeito. Veja uma maneira simples, mas eficaz de deixar a box do Youtube responsiva nestes dois passos:

1 Criando uma classe para o youtube

1.1 Para que você não precise criar essa classe em todos os posts que usar vídeo, vamos configurá-la no editor HTML do próprio Blogger. Acesse- o em Painel do seu blog > Modelo > Editar HTML:

Editar HTML
Clique em Editar HTML

1.2 Clique em qualquer lugar do editor e aperte  Ctrl+F para abrir a busca, procure por ]]></b:skin> e na linha de cima, cole o código:

.youtube {
position:relative;
padding-bottom:52%;
padding-top:30px;
height:0;
overflow:hidden;}
.youtube iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;}

2 Incorporando vídeos responsivos do Youtube

2.1 Quando você precisar incorporar um vídeo do Youtube, pegue o código diretamente no site:

Incorporar vídeo do Youtube
Clique em Compartilhar > Incorporar

2.2 Com o código copiado, vá para o editor do seu post, no modo Escrever ainda, pule duas linhas, escreva algo, como por exemplo, "Asdf", e mude o alinhamento para Alinhar ao centro.

Alinhe ao centro para criar uma nova div
Alinhe ao centro para criar uma nova div

2.3 No modo HTML, localize o "Asdf" e o substitua pelo código de incorporamento do Youtube:

Cole o código do Youtube no lugar do Asdf
Cole o código do Youtube no lugar do Asdf

2.4 Agora é que a mágica acontece. Você precisará adicionar uma classe chamada youtube pra div do vídeo:

2.4.1 Veja como está o código:

<div style="text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pSdj3q0yLZo" frameborder="0" allowfullscreen></iframe></div>

2.4.2 Veja as alterações que você precisará fazer:

<div style="text-align: center;" class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pSdj3q0yLZo" frameborder="0" allowfullscreen></iframe></div>

Só isso mesmo! Legal né? Veja o vídeo abaixo. Faça o teste redimensionando a tela. Ele se ajustará automaticamente à largura de exibição.


Bom, é isso aí! Se gostou, deixe sua opinião aí embaixo, compartilhe este post com outros blogueiros. Até a próxima!