Como deixar os vídeos do YouTube responsivos com CSS
 |
| Como deixar os vídeos do YouTube responsivos com CSS |
No tutorial de hoje ensinaremos a colocar vídeos do youtube no blog totalmente responsivos por meio do CSS
Com o crescente aumento dos celulares, a maioria dos acessos estão acontecendo via mobile e não mais pelo desktop. Sendo assim, para que seu site esteja aptado a essa mudança, é necessário aplicar algumas funcionalidades a fim de que ele possa ser acessado por todos os dispositivos sem nenhum problema.
O passo é muito simples.
Pegue código abaixo e cole na sua folha de estilo do seu blog. Para quem usa o Blogger, cole antes da tag ]]></b:skin>
.video-frame {
position: relative;
padding-bottom: 58%;
height: 0;
overflow: hidden;
}
.video-frame * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Ao criar uma nova postagem, o embed do vídeo deverá ficar entre essas duas tags, como demostrado abaixo:
<div class="video-frame">[YoutTube embed code]</div>