MangaCode - Desenvolvimento & Cursos Web

Desenvolvimento Web

Como tornar um vídeo do Youtube/Vimeo flexível (responsivo)?

  • Autor: Bernardo Corrêa
  • Publicado em: 11/12/2018 18:00h
  • Visualizado por: 1339 pessoas

Salve, pessoal! Uma dica bem rápida para você que está desenvolvendo o seu site responsivo e quer incorporar um vídeo do Youtube ou Vimeo em suas páginas. Por padrão, os códigos de incorporação tanto do Youtube quanto do Vimeo vêm com largura em Pixels, que possui estrutura fixa em layouts. E como você já deve saber, a base do layout responsivo é definida por uma estrutura flexível, ou seja, em porcentagem.

Bom, a primeira coisa que você tem que fazer é obter um código de incorporação de uma dessas plataformas. Nesse caso, vamos utilizar um vídeo do Youtube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/SfkNWZ0xES8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Agora iremos preparar a estrutura que irá deixar esse vídeo com largura flexível, para isso nós iremos criar uma div chamada de video-flex, que ficará responsável por ser o elemento Pai do nosso vídeo, da seguinte forma:

<div class="video-flex">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/SfkNWZ0xES8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Agora vamos ao CSS, vamos estilizar a video-flex e seus elementos filhos para que eles tornem-se responsivos, veja como ficaria:

.video-flex { 
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 0px; 
  height: 0; 
  overflow: hidden;
}

.video-flex iframe, .video-flex object, .video-flex embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

Pronto, com isso todo vídeo que estiver dentro da video-flex estará com uma largura flexível ao seu layout e totalmente adaptável a qualquer resolução.

Espero que vocês tenham gostado de mais essa dica e que ela possa ajudar na construção dos seus projetos responsivos. Não deixe de compartilhar com seus amigos e deixar o seu comentário se você gostou!

Forte abraço!