Deixando Vídeos do Youtube Responsivo no seu Site

Muitos web designer e programadores tem problemas  para deixar os vídeos do Youtube responsivos, ou seja, adaptáveis para todos os tamanhos de tela.

Mas de uma forma simples usando HTML e CSS3 encontrei uma forma de fazer isso sem precisar usar JavaScripts ou plugins no WordPress.

Código CSS3:

@media (max-width:728px) {
       .video-sobre {
             position: relative;
             padding-bottom: 56.25%; /* 16:9 */
             padding-top: 25px;
             height: 0;
         }

       .video-sobre iframe {
             Position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
        }
}

Aplicando o CSS acima para a telas de tamanhos menores que 728px para torna-lo responsivo, consegui utilizar o padrão de tamanho do iframe do Youtube acima deste tamanho como está no código HTML abaixo.

Código HTML

<div class="video-sobre" style="text-align: center;">
   <iframe width="560" height="315"
      src="https://www.youtube.com/embed/VWbW-EiDJbE" frameborder="0"
      allow="accelerometer; autoplay; encrypted-media;
      gyroscope; picture-in-picture" allowfullscreen>[
   </iframe>
</div>

Aplicando na Prática

Abaixo você tem o exemplo do código sendo aplicado:

É isso. Espero que este código facilite a adição de vídeos nos seus projetos como foi para mim.