Vídeo Youtube Responsivo



Como deixar seu vídeo do youtube responsivo?

É  simples deixar seu vídeo responsivo. Copie o embed do vídeo seguindo os passos abaixo:

    • 1. Clique no botão abaixo do seu vídeo no Youtube:

botão compartilhar

    • 2. Então clique em Incorporar:

incorporar

    • 3. Por fim copie o código do iframe para seu site.

Insira o seguinte código em seu site:

<div class="video-responsivo">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

E adicione o código abaixo no CSS do seu tema:

@media only screen and (max-width: 720px) {
    .video-responsivo {
      overflow:hidden;
      padding-bottom:56.25%;
      position:relative;
      height:0;
    }
    .video-responsivo iframe {
      left:0;
      top:0;
      height:100%;
      width:100%;
      position:absolute;
    }
}

Leave a Reply