Videos de YouTube en HTML
A veces puede que quieras convertir tus videos a otros formatos para que se reproduzcan en todos los navegadores. Sin embargo, convertir videos a otros formatos puede ser difícil y llevar mucho tiempo. Una forma más fácil es incrustar el reproductor de YouTube directamente en tu página web utilizando un <iframe> element.
Al guardar o reproducir un video, YouTube mostrará un ID que puedes usar para hacer referencia a un video en el código HTML.
Reproducir un video de YouTube en HTML
Si quieres reproducir tu video en una página web, sigue estos pasos:
- Sube el video a YouTube
- Anota el ID del video
- Especifica un
<iframe>element en tu página web - Haz que el atributo
srcapunte a la URL del video - Usa los atributos
heightywidthpara definir las dimensiones del reproductor - Agrega otros parámetros a la URL (por ejemplo,
&rel=0para evitar que aparezcan videos recomendados no relacionados después de la reproducción)
Ejemplo de reproducción de un video de YouTube en HTML con el elemento <iframe>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Reproducción automática de YouTube
También puedes hacer que tu video comience a reproducirse automáticamente al visitar esa página. Para ello, agrega un parámetro a la URL de YouTube.
Si el valor es 0 (predeterminado), el video no comenzará a reproducirse automáticamente cuando se cargue el reproductor. Si el valor es 1, el video comenzará a reproducirse automáticamente cuando se cargue el reproductor.
Nota: Los navegadores modernos requieren el atributo allow en el iframe para que la reproducción automática y la pantalla completa funcionen correctamente.
Ejemplo de reproducción automática de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Además de la URL original, puede haber una lista separada por comas de videos para reproducir (lista de reproducción de YouTube).
Controles de YouTube
Si el valor es 0, los controles del reproductor no se mostrarán. Si el valor es 1 (predeterminado), los controles del reproductor se mostrarán.
Ejemplo de controles de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Bucle de YouTube
Si el valor es 0 (predeterminado), el video se reproducirá solo una vez. Si el valor es 1, el video se repetirá infinitamente.
Ejemplo de bucle de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube: Uso de las etiquetas HTML <embed> o <object>
Los elementos <embed> y <object> de YouTube están obsoletos. En su lugar, deberías usar <iframe>.
Ejemplo de adición de videos de YouTube con el elemento <embed>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
</body>
</html>Ejemplo de adición de videos de YouTube con el elemento <object>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>
</body>
</html>Práctica
¿Qué etiqueta HTML se utiliza para incrustar videos de YouTube en una página web?