YouTube Responsivo

Existe uma certa dificuldade em configurar vídeos do youtube em sites responsivos, muitas vezes o iframe acaba estourando divs e desconfigurando os sites.

Siga o tutorial para resolver de forma simples

Cole este código no seu CSS

@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%;
        }
}

E utilize este HTML no seu iframe

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