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 |
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:
 |
| 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%;}
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:
 |
| 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 |
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 |
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>
<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>
<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.
-
VEJA FONTE EM CASO DE DULVIDAS:
