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
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
<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:
<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.