Como fazer responsivo ou ajustável, largura total, um vídeo embutido do Youtube

Se alguma vez inserido um vídeo de YouTube em alguns dos seus sites Você deve ter notado que o vídeo é um largura fixa e isto não é responsivo Quando você altera o tamanho o navegador ou quando você vê suas páginas da Web de outros dispositivos de com diferentes tamanhos de tela (Móvel, comprimidos,…).

Em um artigo anterior vimos como você poderia inserir um vídeo do Youtube diretamente em sua página web, e se você usar WordPress, sem qualquer tipo de plugin.

Para fazer isso a Largura de um vídeo inserido, a partir do código HTML que o Youtube nos da, é responsivo, a primeira coisa que faremos é colocar este código dentro de um DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

Você pode usar o código mostrado aqui, e Substitua o rota ao longo da rota que você dá YouTube o vídeo que você deseja Inserir. Por favor, note que você deve atribuir a classe vídeo para o elemento IFRAME.

Em seguida, no seu arquivo. CSS correspondente, ou diretamente em um elemento ESTILO na mesma página, Nós vamos atribuir os atributos de estilo para a classe contêiner e vídeo.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

Uma vez que esse código foi inserido, Se Atualização novamente a página onde você inseriu o vídeo, Verifique Agora isto é ajusta para o Largura do DIV Ele contém. Sim, leste DIV situa-se directamente sobre o CORPO, Você verá que ele Redefinindo para o largura da tela.