A chave para criar uma incorporação responsiva do YouTube é com preenchimento e um elemento de contêiner, que permite que você dê a ele uma proporção fixa. Você também pode usar essa técnica com a maioria das outras incorporações baseadas em iframe, como apresentações de slides.

Aqui está a aparência de um código de incorporação típico do YouTube, com largura e altura fixas: Seria bom se pudéssemos apenas dar-lhe uma largura de 100%, mas não funcionará porque a altura permanece fixa. O que você precisa fazer é envolvê-lo em um contêiner como este (observe os nomes das classes e remoção da largura e altura): E use o seguinte CSS: Como isso funciona:

frameborder="0" allowfullscreen>



frameborder="0" allowfullscreen class="video_youtube">



.container_video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video_youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
O elemento contêiner recebe uma altura zero e uma porcentagem de preenchimento inferior. A porcentagem de preenchimento inferior é uma porcentagem da largura do contêiner, de modo que fornece uma proporção fixa. Mas para que o iframe apareça dentro do contêiner de altura zero, você precisa tornar o contêiner relativo e o iframe absoluto, posicionado dentro do div.

Aqui está o resultado:

fonte: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Comentários