Como fazer um iframe de vídeo responsivo

width:100% faz ele ocupar o contêiner e aspect-ratio calcula a altura. Funciona em todos os navegadores atuais. Para vídeos verticais, use 9/16 e limite a largura (por exemplo max-width:360px).

<iframe src="https://dembed.cc/embed/v_SEU_ID" title="Meu vídeo" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>

56,25% é 9 ÷ 16: o contêiner reserva uma altura proporcional à sua largura e o iframe o preenche. Para 4:3 use 75%; para 1:1, 100%.

<div style="position:relative;padding-top:56.25%">
  <iframe src="https://dembed.cc/embed/v_SEU_ID" title="Meu vídeo" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

1. 1Abra o gerador de código de incorporação e cole o link do seu vídeo.
2. 2Escolha a proporção (16:9, 4:3, 1:1 ou 9:16) e “Responsivo” como tamanho.
3. 3Copie o código e cole-o no seu site.

• Manter width e height fixos no iframe além do style: remova-os ou o navegador pode ignorar o style.
• Um contêiner com largura fixa em pixels: o iframe se adapta ao contêiner, então ele também precisa ser flexível.
• Esquecer o allowfullscreen: o botão de tela cheia não vai funcionar.