Vídeos de YouTube en HTML
Aprende a incrustar vídeos de YouTube con el elemento <iframe>: URL de inserción, tamaño adaptable, el atributo allow, autoplay, loop y modo privado.
Alojar y servir vídeo propio es complicado: hay que codificarlo en varios formatos para que todos los navegadores puedan reproducirlo, almacenar archivos de gran tamaño y pagar el ancho de banda. La alternativa más sencilla es dejar que YouTube se encargue de todo eso e incrustar su reproductor en la página con un elemento <iframe>. El navegador carga el reproductor de YouTube dentro del marco, así que unas pocas líneas de HTML te ofrecen streaming adaptativo, subtítulos y pantalla completa de forma gratuita.
Esta página explica cómo construir la URL de inserción, hacer el reproductor adaptable, configurar permisos con el atributo allow y pasar parámetros de reproducción como autoplay, loop y controles.
Encontrar el ID del vídeo y la URL de inserción
El error más frecuente es poner la URL de visualización en el src. La dirección que ves en el navegador al ver un vídeo en YouTube es una URL de visualización y no puede incrustarse directamente:
https://www.youtube.com/watch?v=i8n1gSw_o_8La parte después de v= es el ID del vídeo (i8n1gSw_o_8 en el ejemplo). Para incrustar necesitas la URL de inserción, que utiliza la ruta /embed/ seguida de ese ID:
https://www.youtube.com/embed/i8n1gSw_o_8Para encontrar el ID: abre el vídeo en YouTube, copia el valor del parámetro de consulta v de la barra de direcciones (o usa la opción Compartir → Insertar, que te da la URL /embed/ completa y el marcado <iframe>). Los enlaces cortos como https://youtu.be/i8n1gSw_o_8 también exponen el ID como el último segmento de la ruta.
Reproducir un vídeo de YouTube en HTML
Para incrustar un vídeo, apunta el src del iframe a la URL de inserción y establece sus dimensiones:
- Anota el ID del vídeo (ver arriba).
- Añade un elemento
<iframe>a tu página. - Haz que el atributo
srcsea la URL de inserción:https://www.youtube.com/embed/VIDEO_ID. - Establece
widthyheight(o ajusta el tamaño con CSS — consulta Incrustaciones adaptables). - Añade un atributo
titleque describa el vídeo para la accesibilidad. - Añade parámetros URL para personalizar la reproducción (p. ej.,
?rel=0para limitar los vídeos recomendados tras la reproducción al mismo canal).
Ejemplo de reproducción de un vídeo 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" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>Modo de privacidad mejorada (youtube-nocookie.com)
Una incrustación estándar de YouTube puede establecer cookies de seguimiento en cuanto se carga la página, incluso antes de que el visitante pulse play. Bajo el RGPD y regulaciones similares, esto puede requerir consentimiento explícito. YouTube ofrece un modo de privacidad mejorada que retrasa el almacenamiento de cookies de identificación personal hasta que el visitante comienza a ver el vídeo. Para usarlo, cambia el host por youtube-nocookie.com:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>Todo lo demás — la ruta /embed/, el ID del vídeo y todos los parámetros URL — funciona exactamente igual. Ten en cuenta que esto reduce, pero no elimina por completo, los datos que el reproductor puede enviar, así que revisa tu política de consentimiento si tienes requisitos estrictos.
El atributo allow
Los navegadores controlan las funciones avanzadas mediante la Permissions Policy. Para que un iframe de YouTube pueda usar autoplay, pantalla completa y otras capacidades, la página padre debe concedérselas a través del atributo allow del iframe. El atributo acepta una lista de tokens de permiso separados por punto y coma. El conjunto que genera el propio diálogo Compartir → Insertar de YouTube es:
<iframe width="560" height="315" title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>Tokens habituales y lo que habilitan:
| Token | Función |
|---|---|
accelerometer | Permite al reproductor leer el movimiento del dispositivo (usado en algunos vídeos 360°/VR). |
autoplay | Permite que el vídeo comience a reproducirse sin un gesto del usuario. |
clipboard-write | Permite al reproductor copiar texto (p. ej. enlaces de compartir) al portapapeles. |
encrypted-media | Habilita la reproducción protegida por DRM mediante Encrypted Media Extensions. |
gyroscope | Permite al reproductor leer la orientación del dispositivo (vídeos 360°/VR). |
picture-in-picture | Permite que el vídeo aparezca en una ventana flotante. |
web-share | Permite al reproductor abrir el diálogo de compartir nativo. |
El atributo separado allowfullscreen habilita el botón de pantalla completa. Puedes omitir los tokens que no necesites; dejar fuera autoplay, por ejemplo, simplemente significa que el autoplay quedará bloqueado.
Incrustaciones adaptables de YouTube
Un iframe con width/height fijos no se adaptará a pantallas pequeñas y puede desbordarse de su contenedor. Hay dos técnicas fiables para que el reproductor escale a su elemento padre manteniendo las proporciones de vídeo 16:9.
Con la propiedad CSS aspect-ratio (navegadores modernos)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.video {
width: 100%;
max-width: 720px;
}
.video iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div class="video">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>
</body>
</html>Con el truco del padding-bottom (amplio soporte)
Para navegadores más antiguos que no tienen aspect-ratio, envuelve el iframe en un contenedor cuya altura se crea mediante padding-bottom: 56.25% (es decir, 9 ÷ 16, la proporción 16:9), y luego estira el iframe para que lo rellene en posición absoluta:
<style>
.video-wrap {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="video-wrap">
<iframe title="YouTube video player"
src="https://www.youtube.com/embed/i8n1gSw_o_8"
allow="autoplay; fullscreen"></iframe>
</div>Personalizar la reproducción con parámetros URL
Puedes configurar el reproductor añadiendo parámetros de consulta a la URL de inserción. El primer parámetro se introduce con ?, y cada parámetro adicional se une con &:
https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0La mayoría de los parámetros aceptan un valor de 0 (desactivado) o 1 (activado). Las secciones siguientes cubren los que usarás con más frecuencia.
Autoplay de YouTube
Para iniciar el vídeo automáticamente cuando se cargue el reproductor, añade autoplay=1 (el valor predeterminado, autoplay=0, espera a que el usuario pulse play).
Importante: los navegadores bloquean el autoplay con sonido. Un vídeo con autoplay también debe estar silenciado, así que combina autoplay=1 con mute=1 — de lo contrario, el vídeo no se iniciará. El iframe también debe tener el permiso autoplay concedido en su atributo allow.
Ejemplo de autoplay de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Controles de YouTube
El parámetro controls activa o desactiva la barra de controles del reproductor (play/pausa, volumen, pantalla completa, etc.). Usa controls=0 para ocultarla y controls=1 (el valor predeterminado) para mostrarla.
Ejemplo de controles de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>Bucle de YouTube
Usa loop=1 para que el vídeo se repita indefinidamente (el valor predeterminado, loop=0, lo reproduce una sola vez). Hay una particularidad: para un vídeo individual, el bucle solo funciona si también pasas playlist con el mismo ID de vídeo. YouTube trata el bucle como "volver al inicio de la lista de reproducción", así que sin esa entrada la lista el vídeo se detiene tras una reproducción. El ejemplo siguiente establece ambos:
Ejemplo de bucle de YouTube:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Legado: las etiquetas <embed> y <object>
Puede que encuentres tutoriales más antiguos que incrustan YouTube con los elementos <embed> o <object>. No uses estos para YouTube — el método moderno y compatible es el <iframe> mostrado arriba. Los ejemplos siguientes se conservan únicamente para que puedas reconocer el patrón heredado:
<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>Temas relacionados
- Etiqueta HTML
<iframe>— el elemento usado en cada incrustación de YouTube. - Etiqueta HTML
<video>— para servir tus propios archivos de vídeo en lugar de incrustar YouTube. - Audio y vídeo en HTML5 — el panorama más amplio de los medios nativos en HTML.