Como incorporar um vídeo em HTML: iframe responsivo passo a passo

Há duas formas de colocar um vídeo em HTML. A tag <video> reproduz um arquivo (um MP4, por exemplo) direto do seu servidor: é simples, mas o arquivo é servido como está, sem qualidade adaptativa nem estatísticas, e consome a transferência da sua hospedagem.

Um iframe incorpora o player de um serviço de vídeo. O arquivo é servido por esse serviço, com qualidade adaptativa, legendas e controles, e no seu site você cola só uma linha de código. É o que YouTube, Vimeo ou Dembed oferecem como “código de incorporação”.

Com a propriedade CSS aspect-ratio, suportada por todos os navegadores modernos, o iframe ocupa a largura disponível e calcula a própria altura, sem contêineres extras:

<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; encrypted-media" allowfullscreen loading="lazy"></iframe>

Se o seu tema é antigo ou o editor remove estilos, use o truque do contêiner: padding-top: 56.25% é a proporção 16:9 (9 ÷ 16). É o formato que o botão “Responsivo” do painel do Dembed copia:

<div style="position:relative;width:100%;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; encrypted-media" allowfullscreen loading="lazy"></iframe></div>

• src: o endereço do player. No Dembed tem a forma https://dembed.cc/embed/ID.
• title: descreve o vídeo para os leitores de tela. É um requisito de acessibilidade e ajuda no SEO.
• allow: as permissões do player (reprodução automática, tela cheia, picture-in-picture). Sem elas, alguns botões não funcionam.
• allowfullscreen: ativa o botão de tela cheia.
• loading="lazy": o iframe só carrega quando o visitante se aproxima dele. Melhora a velocidade e os Core Web Vitals.
• style="border:0": remove a borda cinza que os navegadores colocam nos iframes por padrão.

Os navegadores só permitem a reprodução automática se o vídeo começar sem som. No Dembed você a ativa adicionando ?autoplay=1 ao final do endereço do embed.

Para vídeos verticais (Reels, Shorts, TikTok), mude a proporção para 9/16 e limite a largura para que não ocupe a tela inteira no computador:

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

• Seu próprio HTML: cole onde quer que o vídeo apareça, dentro do <body>.
• WordPress: em um bloco “HTML personalizado” (temos um guia passo a passo).
• Blogger: na “Visualização HTML” da postagem ou em um gadget HTML/JavaScript.
• Wix, Webflow, Squarespace, Shopify e outros construtores: se a sua plataforma tem um bloco “HTML”, “Incorporar” ou “Código personalizado”, cole o iframe ali.

• O vídeo não aparece e tem altura zero: falta a proporção. Use aspect-ratio ou o contêiner com padding-top.
• “Conteúdo bloqueado” ou “conteúdo misto”: seu site está em https e o iframe em http. Use sempre o endereço https.
• “Este site não permite incorporação”: alguns serviços bloqueiam iframes em outros sites (cabeçalhos X-Frame-Options ou frame-ancestors). Use o link oficial de incorporação do serviço, não a página normal do vídeo.
• O editor apaga o código: mude para a visualização HTML ou use um bloco de HTML personalizado; os editores visuais às vezes removem iframes.