YouTube em HTML

HTML Youtube é um tópico que estamos examinando. O Youtube não é apenas uma das formas mais simples de reproduzir vídeos HTML. Ele tem vários recursos que tentaremos cobrir.

O YouTube é a maior plataforma de compartilhamento de vídeos do mundo, com milhões de vídeos e bilhões de espectadores todos os dias.

A incorporação de vídeos do YouTube em suas páginas da Web em HTML pode agregar muito valor ao seu conteúdo e aumentar o engajamento.

Tendo problemas com formatos de vídeo?

A conversão de vídeo pode ser demorada e complicada.

Você pode integrar vídeos do YouTube em seu site para uma solução rápida.

Índice-

ID do vídeo HTML do YouTube:

À medida que você salva (ou reproduz) um vídeo, o YouTube exibe um ID (como uswTpleol).

Podemos nos referir ao seu vídeo pelo id e pelo código HTML quando discutimos HTML Youtube .

Usando HTML para reproduzir vídeo do YouTube:

As etapas a seguir irão guiá-lo durante a reprodução de seu vídeo em uma página da web:

  1. Certifique-se de que o vídeo foi enviado para o YouTube.
  2. Anote o ID do vídeo.
  3. Abrace <iframe> em suas páginas da web.
  4. Coloque a URL do vídeo no atributo src.
  5. O tamanho do jogador pode ser especificado usando os atributos de largura e altura .
  6. Você também pode adicionar outros parâmetros ao URL (veja abaixo).
Dica: para incorporar um vídeo do YouTube em sua página da Web HTML, você pode usar a tag iframe HTML.

Aqui está um exemplo de como incorporar um vídeo do YouTube:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ekgUjyWe1Yc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Reprodução automática e mudo do YouTube:

No YouTube HTML , adicionar autoplay=1 ao seu URL permite que seu vídeo seja reproduzido sozinho quando um visitante visita sua página. No entanto, os visitantes não gostam de iniciar vídeos automaticamente!

Importante: a reprodução automática geralmente não é favorecida pelos navegadores Chrome. No entanto, a reprodução automática silenciada é sempre permitida.

Informações Adicionais: Colocar mute=1 após Autoplay=1 iniciará seu vídeo (mas sem som) por si só.

Example YouTube Video – Autoplay plus Muted:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PkkV1vLHUvQ?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen autoplay='1&mute=1"'> </iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lista de reprodução do YouTube

A lista de reprodução do YouTube é um recurso poderoso que permite organizar e compartilhar uma coleção de vídeos no YouTube.

Com a lista de reprodução do YouTube, você pode criar uma lista personalizada de vídeos que pode compartilhar com outras pessoas ou manter para uso pessoal.

Para criar uma lista de reprodução do YouTube, primeiro você precisa fazer login na sua conta do YouTube. Depois de fazer login, você pode seguir estas etapas:

  • Navegue até o vídeo do YouTube que você deseja adicionar à sua lista de reprodução.
  • Clique no botão “+ Adicionar a” abaixo do vídeo.
  • Selecione "Criar nova lista de reprodução".
  • Digite um nome para sua lista de reprodução e escolha uma configuração de privacidade.
  • Clique em "Criar".
  • Depois de criar sua lista de reprodução do YouTube, você pode adicionar mais vídeos seguindo o mesmo processo.

Para incorporar uma lista de reprodução do YouTube em seu site usando HTML, você pode usar o código de incorporação do YouTube para listas de reprodução.

Aqui está um exemplo de como usar a tag HTML <iframe> para incorporar uma lista de reprodução do YouTube:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/8_lfxPI5ObM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><br><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

No exemplo acima, o atributo src da tag <iframe> é definido como o URL da lista de reprodução do YouTube, com PLAYLIST_ID substituído pelo identificador exclusivo de sua lista de reprodução.

Os atributos width e height especificam as dimensões do player, enquanto o atributo title fornece um título para o player da lista de reprodução.

O atributo allow especifica as permissões necessárias para o player funcionar.

Você também pode reproduzir uma lista de vídeos (junto com seus URLs originais) separados por vírgulas .

Loop do YouTube

Seu vídeo ficará em loop indefinidamente quando loop=1 for adicionado.

Um valor de 0 (padrão) significa que o vídeo será reproduzido apenas uma vez.

Valor 1: O vídeo será repetido continuamente.

YouTube – Loop

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/swZBP23A0Gw?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Marca de incorporação do YouTube

As tags incorporadas também são usadas para inserir o vídeo do Youtube em sua página da web. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<embed width="520" height="315" src="https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tag de objeto do YouTube

A tag de objeto também pode ser usada para incorporar o vídeo do youtube.

Aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<embed width="520" height="315" src="https://mrexamples.com/wp-content/uploads/2023/03/Tesla-Factory-Tour-with-Elon-Musk.mp4">
</embed></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Controles do YouTube

Você pode desativar os controles do player de vídeo adicionando controls=0 .

Valor 0: Os controles do player não são exibidos.

Valor 1 (padrão): A exibição é controlada pelo player.

YouTube – Controls

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AjaY98TDzgk?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share controls=0" allowfullscreen></iframe>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Observação : é importante observar que o YouTube tem termos e condições específicos para a incorporação de vídeos em sites externos, e você deve sempre se certificar de seguir essas diretrizes ao incorporar vídeos em seu site.

Além disso, você deve testar seus vídeos incorporados em diferentes navegadores e dispositivos para garantir que sejam exibidos corretamente e acessíveis a todos os usuários.

Se você achar este artigo informativo, compartilhe-o com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.