Uma incorporação do YouTube com largura e altura fixas fica bem no ecrã onde foi criada, e desajustada em qualquer outro. Eis como torná-la verdadeiramente responsiva.
A técnica do padding-bottom
A solução clássica coloca o iframe num contentor com um padding-bottom baseado em percentagem em vez de uma altura fixa:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <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>n</div>O valor 56,25% resulta de 9 dividido por 16, a proporção padrão do vídeo. Para vídeos verticais do tipo Shorts, use antes 177,78% (16 dividido por 9).
Uma alternativa mais moderna
O CSS atual também suporta a propriedade aspect-ratio diretamente, mais curta em navegadores compatíveis:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Teste você mesmo
Reduza e aumente a janela do navegador enquanto a incorporação está visível, e verifique se o leitor se adapta sem barras pretas nem distorção.
Sem CSS manual
O nosso gerador de código de incorporação cria automaticamente um contentor responsivo corretamente proporcionado, incluindo a versão 9:16 para Shorts.