Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Vídeos HTML de YouTube


La forma más fácil de reproducir videos en HTML es usar YouTube.


¿Tiene problemas con los formatos de video?

Convertir videos a diferentes formatos puede ser difícil y llevar mucho tiempo.

Una solución más fácil es permitir que YouTube reproduzca los videos en su página web.


Identificación de video de YouTube

YouTube mostrará una identificación (como tgbNymZ7vqY), cuando guarde (o reproduzca) un video.

Puede usar esta identificación y hacer referencia a su video en el código HTML.


Reproducir un video de YouTube en HTML

Para reproducir su video en una página web, haga lo siguiente:

  • Sube el vídeo a YouTube
  • Tome nota de la identificación del video
  • Define un <iframe>elemento en tu página web
  • Deje que el srcatributo apunte a la URL del video
  • Usa los atributos widthy heightpara especificar la dimensión del jugador.
  • Agregue cualquier otro parámetro a la URL (ver más abajo)

Ejemplo

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

Reproducción automática de YouTube + Silencio

Puede permitir que su video comience a reproducirse automáticamente cuando un usuario visita la página, agregando autoplay=1a la URL de YouTube. Sin embargo, ¡iniciar automáticamente un video es molesto para sus visitantes!

Nota: los navegadores Chromium no permiten la reproducción automática en la mayoría de los casos. Sin embargo, la reproducción automática silenciada siempre está permitida.

Agregue mute=1después autoplay=1para permitir que su video comience a reproducirse automáticamente (pero silenciado).

YouTube - Reproducción automática + Silenciado

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


Lista de reproducción de YouTube

Una lista separada por comas de videos para reproducir (además de la URL original).


Bucle de YouTube

Agregue loop=1para dejar que su video se reproduzca para siempre.

Valor 0 (predeterminado): El video se reproducirá solo una vez.

Valor 1: el video se reproducirá en bucle (para siempre).

YouTube - Bucle

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

Controles de YouTube

Agregar controls=0para no mostrar controles en el reproductor de video.

Valor 0: los controles del reproductor no se muestran.

Valor 1 (predeterminado): Visualización de los controles del reproductor.

YouTube - Controles

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