O que é um código de incorporação?

Um código de incorporação é um pequeno trecho de HTML que o proprietário de um site cola numa página para que um vídeo do YouTube seja reproduzido ali, em vez de ser acessível apenas através de uma ligação. O YouTube gera-o como um elemento <iframe> que aponta para um URL especial /embed/ do vídeo.

O que contém um código de incorporação

No mínimo, contém um URL de origem com o ID do vídeo, uma largura e altura (ou um invólucro responsivo em alternativa) e um atributo title para acessibilidade. Parâmetros opcionais controlam a reprodução automática, o tempo de início, a visibilidade dos controlos e mais.

Como obter um

Pode copiar a versão do próprio YouTube no painel de partilha por baixo de um vídeo, ou usar o gerador de código de incorporação deste site para adicionar dimensionamento responsivo, modo de privacidade, tempos de início e outras opções que o painel padrão do YouTube não oferece em conjunto.

Um olhar mais atento sobre como um código de incorporação e construído

Um código de incorporação não é uma string fixa única, é montado a partir de algumas partes intercambiáveis. O domínio (youtube.com ou o youtube-nocookie.com, respeitador da privacidade) determina o comportamento dos cookies. O caminho transporta um ID de vídeo único ou, no caso de uma playlist, o caminho videoseries com um parâmetro list. Parâmetros de consulta como start, autoplay e controls ficam depois de um ponto de interrogação e alteram a reprodução. E a marcação envolvente, seja atributos fixos de largura e altura ou uma div de invólucro responsivo, determina como o leitor é dimensionado na página. Compreender estas partes separáveis torna muito mais fácil ler, e editar manualmente, um código de incorporação que não foi gerado por si.

Um exemplo prático

Suponha que quer mostrar um vídeo de demonstração de produto numa landing page, respeitador da privacidade, começando aos 15 segundos para saltar uma introdução, sem reprodução automática. O código de incorporação resultante combina um domínio youtube-nocookie.com, um parâmetro start=15 e um invólucro responsivo:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=15" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" title="Product demo" allowfullscreen loading="lazy"></iframe>
</div>

Cada parte desse excerto corresponde diretamente a uma escolha: o domínio para a privacidade, start=15 para o salto, e o invólucro para o dimensionamento responsivo.

Código de incorporação vs. uma simples ligação

Vale a pena esclarecer o que um código de incorporação não é. Uma simples ligação do YouTube (um URL watch ou youtu.be) destina-se a ser partilhada e clicada; colada como texto simples numa página, fica ali apenas como um URL, ou é convertida automaticamente numa incorporação por plataformas como o WordPress que suportam oEmbed. Um código de incorporação, pelo contrário, é HTML explícito que controla diretamente, dando-lhe as opções de dimensionamento, privacidade e reprodução que uma simples ligação não expõe. Conceitos relacionados que vale a pena compreender junto com este são o elemento iframe de que o código depende, e a distinção entre o URL de incorporação e o URL de visualização.

Perguntas frequentes