Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Vídeos HTML do YouTube


A maneira mais fácil de reproduzir vídeos em HTML é usar o YouTube.


Lutando com formatos de vídeo?

Converter vídeos para diferentes formatos pode ser difícil e demorado.

Uma solução mais fácil é permitir que o YouTube reproduza os vídeos em sua página da web.


ID do vídeo do YouTube

O YouTube exibirá um id (como tgbNymZ7vqY), quando você salvar (ou reproduzir) um vídeo.

Você pode usar esse id e fazer referência ao seu vídeo no código HTML.


Reproduzindo um vídeo do YouTube em HTML

Para reproduzir seu vídeo em uma página da Web, faça o seguinte:

  • Envie o vídeo para o YouTube
  • Anote o ID do vídeo
  • Defina um <iframe>elemento em sua página da web
  • Deixe o srcatributo apontar para o URL do vídeo
  • Use os atributos widthe heightpara especificar a dimensão do player
  • Adicione quaisquer outros parâmetros ao URL (veja abaixo)

Exemplo

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Reprodução automática do YouTube + Silenciar

Você pode permitir que seu vídeo comece a ser reproduzido automaticamente quando um usuário visitar a página, adicionando autoplay=1ao URL do YouTube. No entanto, iniciar um vídeo automaticamente é irritante para seus visitantes!

Observação: os navegadores Chromium não permitem reprodução automática na maioria dos casos. No entanto, a reprodução automática sem som é sempre permitida.

Adicione mute=1depois autoplay=1para que seu vídeo comece a ser reproduzido automaticamente (mas silenciado).

YouTube - Reprodução automática + Sem som

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>


Lista de reprodução do YouTube

Uma lista separada por vírgulas de vídeos a serem reproduzidos (além do URL original).


Loop do YouTube

Adicione loop=1para deixar seu vídeo em loop para sempre.

Valor 0 (padrão): O vídeo será reproduzido apenas uma vez.

Valor 1: O vídeo será repetido (para sempre).

YouTube - Repetir

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Controles do YouTube

Adicionar controls=0para não exibir controles no player de vídeo.

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

Valor 1 (padrão): Os controles do player são exibidos.

YouTube - Controles

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>