MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

HTML Videos de Youtube


La forma más sencilla de reproducir vídeos en HTML es utilizar YouTube.


¿Tienes problemas con los formatos de vídeo?

Convertir vídeos a diferentes formatos puede resultar complicado y llevar mucho tiempo.

Una solución más sencilla es dejar que YouTube reproduzca los vídeos de su página web.


ID de vídeo de YouTube

YouTube mostrará una identificación (como tgbNymZ7vqY) cuando guardes (o reproduzcas) un vídeo.

Puedes utilizar esta identificación y hacer referencia a tu vídeo en el código HTML.


Reproducir un vídeo de YouTube en HTML

Para reproducir su vídeo en una página web, haga lo siguiente:

  • Sube el vídeo a YouTube
  • Toma nota de la identificación del vídeo
  • Defina un elemento <iframe> en su página web
  • Deje que el atributo src apunte a la URL del vídeo
  • Utilice los atributos width y height para especificar la dimensión del reproductor
  • 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>
Inténtalo tú mismo »

Reproducción automática de YouTube + Silenciar

Puedes permitir que tu vídeo comience a reproducirse automáticamente cuando un usuario visita la página, agregando autoplay=1 a la URL de YouTube. Sin embargo, ¡iniciar automáticamente un vídeo es molesto para tus visitantes!

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

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

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Inténtalo tú mismo »

Lista de reproducción de YouTube

Una lista de vídeos separados por comas para reproducir (además de la URL original).


YouTube Loop

Añade loop=1 para que tu vídeo se reproduzca para siempre.

Valor 0 (predeterminado): el vídeo se reproducirá solo una vez.

Valor 1: el vídeo se repetirá (para siempre).

YouTube — Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Inténtalo tú mismo »

YouTube Controls

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

Valor 0: los controles del reproductor no se muestran.

Valor 1 (predeterminado): se muestran los controles del jugador.

YouTube — Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Inténtalo tú mismo »


Comentarios