Como incorporar um vídeo no seu site: video, iframe e HLS

Por GAP Games · publicado em 21 de julho de 2026

Colocar um vídeo em uma página é uma daquelas tarefas que parecem resolvidas em duas linhas e depois revelam camadas: o vídeo aparece mas não toca no iPhone, ocupa a tela inteira no celular, demora oito segundos para dar o primeiro quadro, ou funciona no seu computador e falha no do cliente. Este guia cobre os três caminhos possíveis, quando usar cada um e os detalhes que costumam morder.

Antes de tudo: qual dos três caminhos é o seu

• Arquivo próprio com a tag <video> — você controla tudo, não depende de terceiros e não tem logotipo de plataforma na tela. Em troca, paga a banda e cuida da compatibilidade. Ideal para vídeos curtos: demonstrações, animações de fundo, depoimentos;
• <iframe> do YouTube ou Vimeo — a plataforma cuida de conversão, qualidade adaptativa, legendas e entrega global, de graça. Em troca, você aceita a marca e os controles dela. É a escolha certa para a maioria dos sites com vídeo longo;
• HLS — quando você quer qualidade adaptativa e transmissão ao vivo mantendo a infraestrutura sob seu controle. Exige uma biblioteca JavaScript e um servidor que gere os segmentos.

Caminho 1 — A tag <video> do HTML5

A forma mínima é uma linha: <video src="/videos/demo.mp4" controls></video>. Ela funciona, mas a versão que você quer em produção tem alguns atributos a mais, e cada um resolve um problema real:

• controls — exibe os controles nativos de play, volume e tela cheia. Sem ele, o visitante fica olhando para um quadro parado sem saber o que fazer;
• poster="/imagens/capa.jpg" — a imagem exibida antes do play. Sem poster, muitos navegadores mostram um retângulo preto, o que faz a página parecer quebrada;
• preload="metadata" — baixa só a duração e as dimensões, não o vídeo inteiro. É o equilíbrio certo na maioria dos casos: preload="auto" desperdiça a banda de quem nunca vai dar play, e none deixa a barra de progresso sem duração;
• playsinline — impede que o iPhone jogue o vídeo em tela cheia sozinho ao dar play. É o atributo que mais falta nos códigos que se veem por aí;
• muted e loop — necessários se o vídeo deve começar sozinho. Navegadores bloqueiam reprodução automática com som, sem exceção: autoplay só funciona com muted.

Se você precisa oferecer mais de um formato, use elementos <source> dentro do <video>, do mais moderno para o mais compatível — WebM primeiro, MP4 por último. O navegador escolhe o primeiro que sabe reproduzir, e o MP4 no fim garante que ninguém fique sem nada. Qual formato usar em cada caso está no guia de formatos de vídeo para a web.

Deixando o vídeo responsivo

Vídeo com largura fixa quebra no celular. A solução moderna cabe em duas propriedades de CSS: width: 100% junto de aspect-ratio: 16 / 9. O elemento passa a acompanhar a largura disponível mantendo a proporção, sem os antigos truques de padding percentual.

Legendas

Legendas não são só acessibilidade — boa parte das visualizações em celular acontece com o som desligado. Dentro do <video>, acrescente um <track kind="captions" src="/legendas/pt.vtt" srclang="pt" label="Português" default>. O arquivo .vtt é texto simples com as marcações de tempo, e o navegador cuida do resto.

Caminho 2 — O iframe do YouTube e do Vimeo

Copiar o código de incorporação que a plataforma oferece resolve, mas vale conhecer três ajustes:

• Use o domínio sem cookies do YouTube — trocar youtube.com/embed/ por youtube-nocookie.com/embed/ reduz o rastreamento de quem apenas passa pela página. É a variante que este site usa;
• Sempre coloque title no iframe. É o que um leitor de tela anuncia; sem ele, o usuário ouve apenas "quadro";
• Considere loading="lazy" se o vídeo está no fim de uma página longa. O iframe do YouTube carrega uma quantidade considerável de código, e adiar isso melhora sensivelmente o tempo de carregamento inicial.

A dúvida frequente aqui é por que não dá para simplesmente apontar uma tag <video> para um link do YouTube. A resposta: o YouTube não entrega o arquivo bruto para terceiros — o iframe é a via oficial, e ela existe justamente para esse uso.

Caminho 3 — Streams HLS

Safari, no Mac e no iPhone, reproduz HLS nativamente: basta apontar o <video> para o .m3u8. Chrome, Firefox e Edge não. Para eles é preciso a biblioteca hls.js, que baixa os segmentos e os entrega ao player.

O padrão robusto é testar o suporte nativo primeiro e só então recorrer à biblioteca — assim o Safari usa o caminho eficiente e os demais navegadores usam o alternativo. O funcionamento do formato está detalhado no guia sobre o que é HLS.

Os cinco erros que mais aparecem

1. Autoplay sem muted — o navegador bloqueia silenciosamente e o vídeo nunca começa;
2. Esquecer playsinline — no iPhone o vídeo salta para tela cheia e atropela o layout;
3. Vídeo pesado sem compressão — um arquivo de 200 MB para trinta segundos de imagem trava a página inteira em conexões móveis;
4. Acrescentar crossorigin sem necessidade — o atributo ativa a checagem de CORS, que estava desligada, e passa a exigir do servidor uma autorização que ele não dá. Só use se for desenhar o vídeo em canvas. Para arquivo hospedado em outro domínio que não toca, o suspeito é hotlink: o guia sobre CORS e hotlink separa os dois casos;
5. Link http:// em página https:// — bloqueio por conteúdo misto, também silencioso.

Teste antes de publicar

Um hábito que economiza retrabalho: antes de montar a página, cole o endereço do vídeo no Testador de Vídeo. Ele carrega o arquivo a partir de outro domínio — exatamente a situação da sua página — e revela na hora se há bloqueio de origem ou incompatibilidade de formato. É melhor descobrir isso com o link na mão do que depois de escrever o HTML, o CSS e publicar.