Responsive Design - Como fazer vídeos do youtube responsivos

Estava eu aqui desenvolvendo o site da Webschool.io quando me deparei com um problema:

Como deixar os vídeos das aulas com a altura correta?

Bom para iso nós iremos utilizar uma unidade de tamanho relativamente nova: vw.

Mas e se você quisesse usar a largura ou a altura da viewport ao invés da largura do elemento-pai? Isso é exatamente o que as unidades vh e vw proporcionam.

A medida vh é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é 900px, 1vh equivale a 9px e, analogamente, se a largura da viewport é 750px, 1vw equivale a 7.5px.

fonte: http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/

Sabendo disso a regra do CSS para deixar os vídeos responsivos é:

iframe {  
  height: 56.25vw;
  width: 100%; 
}

E o HTML assim:

<div class="atom-video">  
    <iframe src="https://www.youtube.com/embed/leYxsEAL_yY?list=PL77JVjKTJT2gXHb9FEokJsPEcoOmyF1pY" frameborder="0" allowfullscreen></iframe>
</div>

Coloquei a largura como 100% pois o tamanho dele é definido no seu pai.

Caso você tenha outra solução comente abaixo.

ps: adicionei uma media query para diminuir o tamanho do vídeo quando maior de 800px apenas ara emular um Desktop, futuramente colocarei todas corretamente.

@media screen and (min-width: 800px) {
  iframe { 
    height: 29vw;
    width: 60%; 
  }
}

Comentários

comments powered by Disqus