Desenvolvedores

Como incorporar um vídeo do YouTube no seu site (responsivo)

Incorpore um vídeo do YouTube que se ajusta a qualquer tela: menu Compartilhar, código responsivo, tempo de início, modo de privacidade, WordPress e velocidade.

Por Equipe Free Thumbnail Downloader 2 min de leitura
Capa do artigo: Como incorporar um vídeo do YouTube no seu site (responsivo)
Neste artigo
  1. O jeito rápido: menu Compartilhar do YouTube
  2. O jeito melhor: código responsivo
  3. Opções úteis
  4. Modo de privacidade aprimorada
  5. WordPress
  6. Mantenha a página rápida
  7. Encontrando o ID do vídeo

Incorporar permite assistir a um vídeo do YouTube sem sair da sua página. O código que o YouTube oferece funciona, mas tem tamanho fixo e pode quebrar o layout no celular. Veja como fazer direito.

O jeito rápido: menu Compartilhar do YouTube

  1. Embaixo do vídeo, clique em Compartilhar → Incorporar.
  2. Se quiser, marque Começar em para um tempo inicial.
  3. Copie o código <iframe> e cole no HTML da página.

O código padrão usa width="560" height="315", que pode estourar em telas pequenas.

O jeito melhor: código responsivo

Esta versão sempre ocupa a largura do contêiner e mantém o formato 16:9:

<iframe
  style="width:100%;aspect-ratio:16/9;border:0"
  src="https://www.youtube-nocookie.com/embed/ID_VIDEO"
  title="Player de vídeo do YouTube"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Nosso gerador de código para incorporar cria isso para qualquer vídeo e adiciona opções com caixas de seleção.

Opções úteis

ParâmetroEfeito
start=90Começa em 1:30
end=150Para em 2:30
autoplay=1&mute=1Toca sozinho (precisa estar sem som)
loop=1&playlist=ID_VIDEORepete o vídeo
controls=0Esconde os controles
cc_load_policy=1Mostra legendas por padrão

Coloque depois do ID do vídeo, começando com ? e separando com &, por exemplo .../embed/ID_VIDEO?start=90&mute=1.

Modo de privacidade aprimorada

Com youtube-nocookie.com no lugar de youtube.com, o YouTube não guarda informações dos visitantes até eles darem play. É um bom padrão para blogs e sites que se preocupam com privacidade.

WordPress

No editor de blocos, adicione um bloco HTML personalizado e cole o código. Para uma incorporação simples sem opções, também dá para colar só o link do vídeo numa linha — o WordPress cria o player.

Mantenha a página rápida

Cada player incorporado carrega scripts extras. Com vários vídeos numa página:

  • Mantenha loading="lazy" para os players só carregarem quando o visitante chegar perto.
  • Considere mostrar uma thumbnail com link em vez do player completo. As URLs de thumbnail estão no nosso guia de URL de thumbnails, e você baixa as imagens com o baixador de thumbnails.

Encontrando o ID do vídeo

O ID são os 11 caracteres depois de v= ou youtu.be/. Se tiver muitos links, o extrator de ID tira todos de uma vez.

Perguntas frequentes

Por que meu vídeo incorporado não toca sozinho com som?

Os navegadores bloqueiam reprodução automática com som. Ela só funciona com o vídeo sem som, então adicione mute=1 junto com autoplay=1.

Posso incorporar qualquer vídeo do YouTube?

A maioria dos vídeos públicos, sim, mas quem enviou pode desativar a incorporação. Nesse caso o player mostra um aviso e um link para assistir no YouTube.

Pegue qualquer thumbnail do YouTube em segundos

Cole um link e baixe todos os tamanhos disponíveis, até 1280×720.

Abrir o baixador
Equipe Free Thumbnail Downloader

Criamos ferramentas rápidas e simples para criadores do YouTube e escrevemos guias com base nos nossos próprios testes.

Continue lendo