📘 Aula 23: Incorporação de vídeos externos 📘

Inserindo vídeos do youtube com URL

Para incorporar um vídeo do YouTube, você pode usar a seguinte estrutura:

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture; web-share" 
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>

Substitua VIDEO_ID pelo ID do vídeo que deseja incorporar.

Explicação dos elementos usados na estrutura

• <iframe>:
  Elemento HTML usado para incorporar outro conteúdo dentro da página (como vídeos do YouTube, mapas, ou páginas externas).
• width="560" e height="315":
  Definem a largura e a altura do quadro onde o vídeo será exibido.
• src="https://www.youtube.com/embed/VIDEO_ID":
  É o endereço (URL) do vídeo a ser carregado. O embed indica o modo de incorporação.
• title="YouTube video player":
  Atributo de acessibilidade: descreve o conteúdo do iframe para leitores de tela.
• frameborder="0":
  Remove a borda padrão do iframe. (Hoje em dia, é mais comum usar CSS para isso).
• allow="..." Controla quais recursos o iframe pode usar como:
• accelerometer → acesso ao acelerômetro do dispositivo.
• autoplay → permite que o vídeo comece a tocar automaticamente.
• clipboard-write → autoriza copiar/conteúdo na área de transferência.
• encrypted-media → habilita mídias protegidas (DRM).
• >gyroscope → acesso ao sensor giroscópio.
• picture-in-picture → permite o vídeo ser exibido em miniatura flutuante.
• web-share → habilita funções de compartilhamento.
• referrerpolicy="strict-origin-when-cross-origin"→
  Define como o navegador envia informações do referenciador (referrer) ao acessar o conteúdo externo. Nesse caso, protege a privacidade, enviando menos dados.
• allowfullscreen → Permite que o vídeo seja aberto em tela cheia.

Resumindo:

esse bloco cria uma janela (iframe) embutida na sua página que carrega um vídeo do YouTube,
com configurações de tamanho, segurança, acessibilidade e interatividade.

resultado Visual

O vídeo incorporado deve ser exibido corretamente na página dessa forma abaixo.

Atenção a direitos autorais nos seus vídeos, pois YouTube não perdoa.

Site Recomendado: para postar e limitar o uso é o Vimeo.com
OBS: O Vimeo oferece mais controle sobre a privacidade e a distribuição dos vídeos.

Vantagens do Vimeo:

• Controle de privacidade: Permite definir quem pode ver seus vídeos.
• Sem anúncios: Os vídeos não são interrompidos por anúncios.
• Qualidade de vídeo: Suporte para vídeos em alta definição.
• É usado para trabalhos mais profissionais e criativos.

Desvantagens do Vimeo:

• Custo: Para acessar todos os recursos, é necessário pagar.
• Menor alcance: Pode não ter a mesma audiência que o YouTube.
• Funcionalidades limitadas: Algumas ferramentas de marketing podem ser menos robustas.