Vídeo Youtube Responsivo

Rate this post

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;
        }
    }
    
    Marcelo Srougi é desenvolvedor web na agência Srougi.biz, co-fundador do Rache Aqui, MBA em Gestão de Projetos pelo IBMEC, e fundador do portal Vida Loka.

Leave a Reply

Gel Reduction Funciona

detophyll

conutherm

colastrina

quitoplan

Renova31

www.dicasdebelezaesaude.com.br

Duromax

Duromax

Duromax