Uma incorporação do YouTube com largura e altura fixas parece bem no ecrã onde a construiu e quebra em qualquer outro. Eis como fazê-la adaptar-se corretamente.
O problema do dimensionamento fixo
O código de incorporação predefinido do YouTube define uma largura e altura literais em píxeis, por exemplo 560 por 315. Num monitor de secretária grande isso pode parecer pequeno; num ecrã de telemóvel estreito pode transbordar completamente a página, obrigando o visitante a deslocar-se lateralmente. Nenhum dos casos é uma boa experiência.
A técnica do padding-bottom
A solução padrão envolve o iframe num contentor dimensionado através de um padding-bottom baseado em percentagem em vez de uma altura fixa, e posiciona o iframe de forma absoluta para preencher esse contentor:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>O valor de 56,25% resulta de dividir 9 por 16, a proporção padrão de vídeo. Como a largura do contentor está definida como 100% do seu elemento pai, e a sua altura é calculada como uma percentagem dessa largura, a caixa mantém uma forma 16:9 perfeita independentemente da largura da página envolvente.
A versão para Shorts
Os vídeos verticais, como os YouTube Shorts, usam a proporção oposta. Troque o padding-bottom para 177,78% (16 dividido por 9) e a mesma técnica mantém uma forma 9:16 correta.
Uma alternativa moderna mais simples
O CSS atual suporta diretamente a propriedade aspect-ratio, que pode substituir o truque do padding-bottom nos navegadores que a suportam:
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>É mais curto e mais fácil de ler, embora o método do padding-bottom continue a ser a opção mais segura se precisar de suportar navegadores mais antigos.
Testá-lo corretamente
Redimensione a janela do navegador para mais estreita e mais larga enquanto a incorporação está no ecrã (ou use a barra de dispositivos do seu navegador para simular um telemóvel) e confirme que o reprodutor se adapta suavemente, sem barras pretas, sem transbordo e sem esticar. Este é exatamente o tipo de verificação que vale a pena fazer antes de publicar qualquer página com um vídeo incorporado.
Dispense o CSS manual
O nosso gerador de código de incorporação produz automaticamente um contentor responsivo com as proporções corretas, incluindo a versão 9:16 para Shorts, para que não precise de memorizar estas percentagens.