Incorporar um vídeo do YouTube parece simples: copiar um link, colar algum código, pronto. Mas há uma diferença real entre um embed que simplesmente funciona e um que é rápido, responsivo, respeitador da privacidade e corretamente dimensionado em qualquer dispositivo. Este guia aborda tudo isso num só lugar.
O que significa realmente “incorporar”
Incorporar um vídeo significa apresentá-lo diretamente na sua própria página web através de um <iframe>, em vez de apenas apontar um link para o YouTube. O YouTube gera um URL de incorporação especial para cada vídeo (no formato youtube.com/embed/VIDEO_ID), e é esse URL que vai dentro do atributo src do iframe. A própria página visível do YouTube.com, com comentários e recomendações, não pode ser colocada num frame desta forma; apenas o URL de incorporação dedicado foi construído para isso.
A anatomia de um código de incorporação
Um embed básico tem este aspeto:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube vídeo player" frameborder="0" allowfullscreen></iframe>Cada parte importa. O width e o height definem um tamanho fixo em píxeis, o que funciona mas não se adapta a diferentes tamanhos de ecrã. O URL src determina que vídeo é reproduzido e que domínio o trata (um detalhe que importa para a privacidade, abordado abaixo). O atributo title não é decorativo: os leitores de ecrã anunciam-no, por isso um título genérico ou em falta é uma lacuna real de acessibilidade. O allowfullscreen permite que o visitante expanda o reprodutor, algo que a maioria dos visitantes espera de qualquer vídeo incorporado.
Torná-lo responsivo
Dimensões fixas em píxeis parecem bem no ecrã onde as testou e quebram em qualquer outro tamanho de ecrã. Um embed responsivo, em vez disso, envolve o iframe num contentor que mantém a proporção correta em qualquer largura:
<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% é simplesmente a proporção altura-largura de um vídeo 16:9 expressa em percentagem (9 ÷ 16 = 0,5625). Para um vídeo vertical estilo Shorts, em 9:16, o valor equivalente é 177,78% (16 ÷ 9). Este “truque do padding-bottom” tem funcionado de forma fiável em todos os navegadores há mais de uma década, razão pela qual continua a ser a abordagem mais comum, embora a propriedade aspect-ratio do CSS moderno seja uma alternativa válida e mais simples nos navegadores que a suportam.
Privacidade: youtube.com vs. youtube-nocookie.com
O YouTube oferece dois domínios para incorporação. O domínio padrão youtube.com comporta-se como o resto do YouTube e pode definir cookies de rastreamento assim que a página carrega. O domínio youtube-nocookie.com é funcionalmente idêntico, mas evita definir esses cookies até o visitante interagir de facto com o reprodutor, razão pela qual é a opção predefinida recomendada para sites atentos ao RGPD. Alternar entre eles é tão simples como mudar o domínio no URL de incorporação; tudo o resto no embed mantém-se igual.
Controlar a reprodução
O URL de incorporação aceita uma série de parâmetros de consulta que alteram o comportamento do reprodutor:
- start e end (em segundos) delimitam a reprodução a um intervalo específico.
- autoplay=1 inicia o vídeo imediatamente, embora os navegadores geralmente exijam mute=1 em conjunto, ou a reprodução automática será bloqueada.
- loop=1, combinado com um parâmetro playlist correspondente definido com o mesmo ID do vídeo, repete o vídeo continuamente.
- controls=0 oculta a barra de controlos do reprodutor, útil para vídeo estilo fundo.
- rel=0 limita as sugestões de vídeos relacionados no final da reprodução a vídeos do mesmo canal.
Para a lista completa com exemplos, consulte a nossa referência de parâmetros do iframe.
Desempenho: não deixe os embeds abrandar a sua página
Um iframe do YouTube é um elemento relativamente pesado de carregar: traz consigo os próprios scripts do reprodutor e uma miniatura de pré-visualização mesmo antes de alguém carregar em reproduzir. Numa página com vários embeds, carregá-los todos de imediato pode abrandar visivelmente o carregamento inicial da página. Duas soluções resolvem bem isto. Primeiro, adicione o atributo nativo loading="lazy" ao iframe, para que os navegadores adiem o seu carregamento até se aproximar da área visível. Segundo, em páginas com muitos vídeos, considere um padrão de “clicar para carregar”: mostre primeiro uma imagem de miniatura leve e só insira o iframe real quando o visitante clicar nela.
Formatos especiais: Shorts e listas de reprodução
Os Shorts incorporam-se tecnicamente tal como os vídeos normais, mas precisam de um contentor responsivo 9:16 em vez de 16:9 para evitar barras pretas à volta do enquadramento vertical. As listas de reprodução usam um caminho de incorporação totalmente diferente, /embed/videoseries, combinado com um parâmetro list definido com o ID da lista de reprodução, e mostram controlos de seguinte/anterior que percorrem todos os vídeos da lista.
Onde colocar realmente o código
Depois de ter o seu código de incorporação, ele precisa de ir para algum sítio onde o HTML do seu site seja diretamente editável: um bloco de HTML personalizado no editor de blocos do WordPress, uma secção de texto rico ou liquid personalizado no Shopify, um widget de incorporação no Wix, ou diretamente na marcação de um site feito à mão. Cobrimos os passos exatos para as plataformas mais comuns em guias separados para WordPress, Shopify e Wix.
Construí-lo sem escrever qualquer código
Tudo o que foi referido acima (contentor responsivo, domínio com privacidade reforçada, hora de início e fim, reprodução automática, ciclo, controlos ocultos, dimensionamento para Shorts e modo de lista de reprodução) é tratado automaticamente pelo nosso gerador de código de incorporação gratuito. Cole um link, ative as opções que precisa e copie o código finalizado. Funciona inteiramente no seu navegador, por isso nada sobre o vídeo que está a incorporar é enviado ou armazenado nos nossos servidores.
Erros comuns a evitar
- Colar o URL de visualização (youtube.com/watch?v=…) diretamente no src de um iframe em vez de o converter primeiro para o formato /embed/.
- Definir autoplay=1 sem mute=1, o que a maioria dos navegadores simplesmente ignora.
- Esquecer um atributo title descritivo, o que prejudica a acessibilidade.
- Usar width e height fixos numa página que também precisa de funcionar bem em dispositivos móveis.
- Carregar muitos embeds de uma vez numa única página sem lazy loading, arrastando para baixo a velocidade da página.
Com estas bases cobertas, tem tudo o que precisa para incorporar vídeo do YouTube corretamente: rápido, responsivo, acessível e consciente da privacidade, quer construa o código à mão quer o gere em poucos cliques.