Cómo Insertar un Video de YouTube en HTML (y Hacerlo Responsive)

- Andrés Cruz - EN In english

Insertar un vídeo de YouTube en tu página web es una de esas tareas que parecen sencillas… hasta que llegan los problemas: tamaños fijos, vídeos que no son responsive, parámetros que nadie explica bien. Si alguna vez te has preguntado cómo insertar un vídeo de YouTube en HTML y que quede perfecto en móviles, tabletas y escritorio, has llegado al lugar correcto.

Cuando yo empecé también caí en esa trampa: copiaba el iframe tal cual y luego me tocaba pelearme con que no se adaptara al móvil o que los controles desaparecieran sin razón. Por eso esta guía reúne todo lo que necesitas, desde lo más básico hasta configuraciones avanzadas, para que puedas poner un vídeo de YouTube en HTML de forma correcta desde el primer intento.

¿Qué significa realmente "insertar un vídeo de YouTube" en HTML?

Cómo funciona el iframe por dentro

Cuando haces clic en Compartir → Insertar, YouTube te entrega un bloque código HTML con un elemento <iframe>. Ese iframe no es más que una "ventana" dentro de tu web que muestra el reproductor de YouTube sin que tengas que alojar el vídeo en tu propio servidor.

Por ejemplo, el código de inserción de YouTube tiene esta forma:

<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0" allowfullscreen></iframe>

El atributo src es lo único que necesitas cambiar si quieres incrustar otro vídeo. El resto de atributos controlan las dimensiones y el comportamiento del reproductor.

Ventajas de incrustar un vídeo en vez de subirlo directamente

Usar el vídeo directamente desde YouTube te quita toneladas de trabajo:

  • No tienes que convertir el vídeo a múltiples formatos para compatibilidad con distintos navegadores.
  • No consumes ancho de banda propio: YouTube absorbe todo el tráfico.
  • Te beneficias de las funciones sociales de YouTube (likes, comentarios, suscripciones).
  • El reproductor ya viene optimizado y actualizado para la mayoría de navegadores y dispositivos.
  • El vídeo sigue disponible en YouTube para quienes lo encuentren desde el buscador.

Cómo obtener el código para insertar vídeo en HTML desde YouTube

El proceso es rápido. Sigue esta ruta en YouTube:

  • Abre el vídeo que deseas incrustar.
  • Haz clic en el botón Compartir (debajo del reproductor).
  • Selecciona la opción Insertar.
  • Copia el bloque de iframe que aparece en el cuadro de diálogo.

Dónde pegar el código HTML en tu página

El iframe debe ir siempre dentro de la etiqueta <body>, nunca en el <head>. Un ejemplo básico y funcional sería:

<body>
   <h1>Mi vídeo de YouTube</h1>
   <iframe width="560" height="315" src="https://www.youtube.com/embed/TU_ID" allowfullscreen></iframe>
</body>

YouTube es una plataforma de contenido digital en la que puedes encontrar toda clase de vídeos. En los últimos años ha crecido en todos los aspectos, ofreciendo opciones muy prácticas para insertar vídeos fácilmente en una página web HTML:

Cómo insertar un vídeo de YouTube en HTML: botón Compartir e Insertar

Selecciona un vídeo de YouTube → clic en "Compartir" → clic en la pestaña "Insertar".

Una vez que tengas el código del vídeo que deseas incrustar en tu página web, obtendrás algo similar a esto:

<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0" allowfullscreen></iframe>

Empleando directamente los vídeos de YouTube puedes ahorrar mucho trabajo; por ejemplo, evitar convertir vídeos a distintos formatos para soportar distintos navegadores, aprovechar las opciones sociales de YouTube para compartir y difundir el contenido, y olvidarte de los costes de almacenamiento y ancho de banda.

Errores más comunes al copiar el embed de YouTube

  • Pegar el iframe dentro de <head> en lugar de <body>.
  • Romper la URL al añadir parámetros con el signo ? dos veces (solo se usa uno, el resto se encadenan con &).
  • Borrar accidentalmente el atributo allowfullscreen, lo que impide el modo pantalla completa.
  • Confundir la URL estándar de YouTube (https://www.youtube.com/watch?v=ID) con la URL de embed (https://www.youtube.com/embed/ID): debes usar siempre la versión /embed/.

Analizando los atributos del iframe de YouTube

El código que obtienes desde YouTube no es más que un iframe HTML estándar con una serie de atributos que conviene conocer bien:

  • Los atributos width y height especifican las dimensiones iniciales del vídeo en píxeles. YouTube usa por defecto 560 y 315 (proporción 16:9), pero puedes cambiarlos o eliminarlos si usas CSS responsive.
  • El atributo allowfullscreen habilita el modo pantalla completa (full screen). Sin él, el botón de pantalla completa desaparece.
  • El atributo src contiene la URL del vídeo en formato embed. Es el único valor que debes cambiar para incrustar un vídeo diferente. Además, en esa URL puedes añadir parámetros adicionales para personalizar el comportamiento del reproductor, como veremos a continuación.

Personalizar el iframe: parámetros de la URL de los vídeos de YouTube

Una de las partes más potentes —y menos documentadas en tutoriales básicos— es la posibilidad de añadir parámetros a la URL del src para controlar el comportamiento del reproductor. Aquí tienes los más importantes:

autohide — Controla cuándo se ocultan los controles del vídeo:
  • autohide=0: los controles son siempre visibles.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=0" allowfullscreen></iframe>
  • autohide=1: los controles se ocultan al iniciar la reproducción.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=1" allowfullscreen></iframe>
  • autohide=2 (por defecto): el comportamiento varía según la proporción del vídeo. Para 16:9 y 4:3 actúa como autohide=1; para cualquier otra proporción, como autohide=0.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=2" allowfullscreen></iframe>
autoplay — Define si el vídeo se reproduce automáticamente al cargar:
  • autoplay=0 (por defecto): el vídeo no inicia solo.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=0" allowfullscreen></iframe>
  • autoplay=1: el vídeo inicia automáticamente. Ten en cuenta que los navegadores modernos pueden bloquear el autoplay con sonido; se recomienda combinarlo con mute=1.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1&mute=1" allowfullscreen></iframe>
controls — Controla la visibilidad de los botones del reproductor:
  • controls=0: no se muestran controles; el reproductor carga automáticamente.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=0" allowfullscreen></iframe>
  • controls=1 (por defecto): los controles se muestran y el reproductor carga automáticamente.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=1" allowfullscreen></iframe>
  • controls=2: los controles se muestran, pero el reproductor solo carga cuando el usuario inicia la reproducción (mejora el tiempo de carga).
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=2" allowfullscreen></iframe>
loop — Especifica si el vídeo debe repetirse en bucle al terminar:
  • loop=0 (por defecto): el vídeo no se repite.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?loop=0" allowfullscreen></iframe>
  • loop=1: el vídeo se repite indefinidamente. Para que funcione correctamente en embed, debes añadir también el parámetro playlist con el mismo ID del vídeo.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?loop=1&playlist=85MppyLJHz0" allowfullscreen></iframe>
playlist — Permite crear una lista de reproducción encadenada. Separa los IDs de los vídeos con comas (,).También es necesario para que loop=1 funcione correctamente en el modo embed.
showinfo — Controla si se muestra el título del vídeo (obsoleto en la API moderna, pero útil en embeds antiguos):<iframe src="https://www.youtube.com/embed/85MppyLJHz0?showinfo=1" allowfullscreen></iframe>
disablekb — Desactiva (1) o activa (0) los atajos de teclado del reproductor:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1" allowfullscreen></iframe>
start — Especifica (en segundos) el punto de inicio del vídeo. Útil para destacar una parte concreta:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?start=5" allowfullscreen></iframe>
end — Especifica (en segundos) el punto en el que el reproductor se detiene:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?end=60" allowfullscreen></iframe>
rel — Controla los vídeos sugeridos al finalizar la reproducción:rel=0: muestra solo vídeos del mismo canal (desde 2018, no es posible ocultarlos del todo).
<iframe src="https://www.youtube.com/embed/85MppyLJHz0?rel=0" allowfullscreen></iframe>
mute — Silencia el audio del vídeo al cargarse:mute=1: imprescindible cuando usas autoplay=1, ya que los navegadores bloquean el autoplay con sonido.
<iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1&mute=1" allowfullscreen></iframe>

Puedes encontrar la documentación oficial y completa en: Reproductores incorporados de YouTube y parámetros del reproductor.

Resumen: ajustes de visualización más usados

  • autohide
    • autohide=0 → Controles siempre visibles
    • autohide=1 → Se esconden al reproducir
    • autohide=2 → Comportamiento según proporción del vídeo (valor por defecto)

  • Ejemplo:

    <iframe src="https://www.youtube.com/embed/ID?autohide=1" allowfullscreen></iframe>
  • controls
    • controls=0 → Sin controles visibles
    • controls=1 → Visibles (valor por defecto)
    • controls=2 → Solo se muestran cuando el usuario interactúa
  • showinfo (obsoleto en embeds modernos, pero funcional en algunos casos):
    • showinfo=0 → Quita el título del vídeo
    • showinfo=1 → Muestra el título

Resumen: parámetros de reproducción (autoplay, loop, start, end)

  • Autoplay:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1" allowfullscreen></iframe>

  • loop — Para que funcione en embed debes añadir también el parámetro playlist con el mismo ID:

    <iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID" allowfullscreen></iframe>

  • start / end — Perfectos si quieres destacar un fragmento concreto del vídeo:

    <iframe src="https://www.youtube.com/embed/ID?start=5&end=20"></iframe>

  • Combinación avanzada — Autoplay, sin controles y en bucle:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1&controls=0&loop=1&playlist=ID" allowfullscreen></iframe>

Cómo hacer el vídeo responsive: que se adapte a móviles y pantallas grandes

Cómo incrustar vídeo de YouTube responsive: dos soluciones con CSS y JavaScript

YouTube permite insertar vídeos en HTML fácilmente, pero lo que no resulta tan evidente es conseguir que ese vídeo se comporte de manera responsive: es decir, que se adapte automáticamente al ancho del contenedor según el tamaño de la pantalla del dispositivo.

Cuando inserté mis primeros vídeos, YouTube me los entregaba con medidas fijas como width="560" y height="315".
El resultado en móviles era desastroso: se salían del contenedor o quedaban enmarcados con barras negras.

Aquí tienes dos soluciones probadas para solucionarlo definitivamente.

El problema de raíz es que el código HTML para insertar vídeo de YouTube viene con un tamaño predefinido indicado por los atributos height y width. Esto hace que el vídeo ignore completamente el diseño responsive de tu web. A continuación veremos dos soluciones que puedes aplicar por separado o en conjunto.

Primera solución: vídeo responsive con CSS (rápida y sencilla)

La técnica clásica consiste en envolver el iframe en un contenedor div y utilizar el truco del padding-bottom proporcional para mantener la relación de aspecto:

.v-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    padding-top: 25px;
    height: 0;
}
.v-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

El valor 56.25% corresponde a la proporción 16:9 (9 / 16 = 0.5625). El contenedor tiene height: 0 y crece únicamente a través del padding-bottom, lo que permite que el iframe posicionado de forma absoluta rellene ese espacio manteniendo siempre la proporción correcta, independientemente del ancho disponible.

HTML necesario para el vídeo responsive con CSS

Puedes eliminar (o no) los atributos width y height que YouTube añade al iframe, ya que el CSS se encargará de las dimensiones. El resultado final sería:

<div class="v-container">
    <iframe
        src="https://www.youtube.com/embed/Me2aXBodqnA"
        frameborder="0"
        allow="autoplay; encrypted-media"
        allowfullscreen>
    </iframe>
</div>

Y este es el resultado:

Vídeo de YouTube adaptativo con CSS

Puedes consultar el ejemplo en:

Ejemplo responsive con CSS

Segunda solución: vídeo responsive con JavaScript (ideal si tienes varios vídeos en la misma página)

La solución con CSS es rápida, pero puede dar problemas si los vídeos tienen proporciones distintas a 16:9. La alternativa con JavaScript es más robusta: detecta la proporción real de cada vídeo y lo reescala dinámicamente cada vez que el usuario redimensiona la ventana.

El primer paso es seleccionar todos los iframe de YouTube presentes en la página. Lo hacemos usando el selector de contención *= sobre el atributo src:

var $videosYoutube = $("iframe[src*='www.youtube.com']")

En el ejemplo usamos jQuery, pero puedes traducirlo fácilmente a JavaScript puro si prefieres no depender de librerías externas. A continuación, seleccionamos el contenedor padre de los vídeos:

$v_container = $("body section")

Después, calculamos y almacenamos la proporción (aspect ratio) de cada vídeo como un atributo personalizado, y eliminamos las dimensiones fijas que añade YouTube. Este bloque se ejecuta solo una vez, al cargar la página:

$videosYoutube.each(function () {
    $(this)
        .attr('proportion', this.height / this.width)
        // Eliminamos las dimensiones fijas
        .removeAttr('height')
        .removeAttr('width');
});

Por último, definimos el callback para el evento resize de la ventana, que reescalará cada vídeo según su proporción y el ancho actual del contenedor:

$(window).resize(function () {
    $videosYoutube.each(function () {
        var $el = $(this);
        $el
            .width(container_width)
            .height(container_width * $el.attr('proportion'));
    });
})

El código completo y listo para usar es el siguiente:

// Seleccionamos todos los iframes de YouTube
var $videosYoutube = $("iframe[src*='www.youtube.com']"),
    // Contenedor padre de los vídeos
    $v_container = $("body section");

// Guardamos las proporciones y eliminamos las dimensiones fijas
$videosYoutube.each(function () {
    $(this)
        .attr('proportion', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');
});

// Cada vez que se redimensiona la ventana, reescalamos los vídeos
$(window).resize(function () {
    var container_width = $v_container.width();
    $videosYoutube.each(function () {
        var $el = $(this);
        $el
            .width(container_width)
            .height(container_width * $el.attr('proportion'));
    });
}).resize(); // Ejecutamos también al cargar

Puedes ver el ejemplo final en:

Ejemplo responsive con JavaScript

Estos mismos códigos funcionan perfectamente con otras plataformas de vídeo como Vimeo, ya que la lógica se basa en los atributos del iframe, no en la URL de YouTube específicamente.

Descargar ambos ejemplos (.rar)

Buenas prácticas para insertar vídeos de YouTube en HTML

  • Dimensiones recomendadas según dispositivo:
    • Escritorio: entre 560 y 800 px de ancho (siempre con proporción 16:9).
    • Móvil y tablet: usa siempre la técnica responsive (CSS o JS) para evitar desbordamientos.
  • Optimización de rendimiento:
    • Usa el atributo loading="lazy" en el iframe para que el navegador solo cargue el reproductor cuando el usuario se acerque a él. Esto mejora el tiempo de carga inicial, especialmente en páginas con varios vídeos:
    • <iframe loading="lazy" src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>
  • SEO y experiencia de usuario:
    • Usa un encabezado <h2> o <h3> descriptivo justo antes del vídeo para que Google entienda su contexto.
    • Añade texto antes y después del vídeo para contextualizarlo: Google no puede "ver" vídeos, pero sí el texto que los rodea.
    • Añade el atributo title al iframe para mejorar la accesibilidad y el rastreo por parte de los buscadores:
      <iframe title="Título descriptivo del vídeo" src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>

  • Privacidad mejorada: YouTube ofrece el dominio youtube-nocookie.com para embeds. Al usarlo, YouTube no almacena cookies en el navegador del visitante hasta que este reproduzca el vídeo:

    <iframe src="https://www.youtube-nocookie.com/embed/ID" allowfullscreen></iframe>

Ejemplos completos listos para copiar

  • Embed básico — el mínimo imprescindible:

    <iframe src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>

  • Embed personalizado — con autoplay (silenciado), controles y punto de inicio:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1&controls=1&start=10" allowfullscreen></iframe>

  • Embed responsive con CSS:

    <div class="v-container">
    <iframe src="https://www.youtube.com/embed/ID" allowfullscreen loading="lazy"></iframe>
</div>

  • Embed con privacidad mejorada (sin cookies hasta que el usuario reproduzca):

    <iframe src="https://www.youtube-nocookie.com/embed/ID" allowfullscreen loading="lazy"></iframe>

Extra: Cómo poner un vídeo de YouTube como audio de fondo

Si lo que necesitas no es mostrar el vídeo, sino reproducir su audio de fondo de forma continua, puedes ocultar el iframe con CSS y combinar los parámetros autoplay, loop y mute=0:

<div style="display:none;">
    <iframe
        width="0"
        height="0"
        src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1&playlist=VIDEO_ID&mute=0"
        allow="autoplay">
    </iframe>
</div>

Ten en cuenta que los navegadores modernos bloquean el autoplay con sonido si el usuario no ha interactuado previamente con la página. Si el audio no arranca solo, es probable que sea una restricción del navegador, no un error de tu código. En ese caso, puedes activarlo mediante un botón que dispare la reproducción con JavaScript.

También es importante saber que aunque el elemento tenga height="0" y width="0", el iframe sigue existiendo en el DOM. Asegúrate de que el contenedor padre tenga display: none o visibility: hidden para evitar que el navegador reserve espacios en blanco extraños, especialmente en versiones móviles.

Preguntas frecuentes sobre cómo insertar vídeos de YouTube en HTML

  • ¿Por qué mi iframe de YouTube no es responsive?
    • Porque YouTube entrega el código con dimensiones fijas (width y height) codificadas directamente en el iframe. Para solucionarlo, necesitas un contenedor con proporción definida por CSS o un sistema JavaScript de reescalado dinámico, como los explicados en esta guía.
  • ¿Cómo quitar los controles del reproductor de YouTube?
    • Añade el parámetro controls=0 a la URL del src:
      <iframe src="https://www.youtube.com/embed/ID?controls=0" allowfullscreen></iframe>
  • ¿Cómo evitar que YouTube muestre vídeos sugeridos al terminar?
    • Añade rel=0 a la URL. Desde 2018, YouTube ya no permite ocultar completamente los vídeos sugeridos, pero con rel=0 solo mostrará vídeos del mismo canal en lugar de vídeos de terceros:
      <iframe src="https://www.youtube.com/embed/ID?rel=0" allowfullscreen></iframe>
  • ¿Cómo incrustar un vídeo de YouTube sin anuncios?
    • No es posible eliminar los anuncios de YouTube desde el iframe embed. Los anuncios que aparecen están controlados por la configuración de monetización del canal. Lo más cercano a reducirlos es usar el dominio youtube-nocookie.com, que limita las cookies de seguimiento, aunque no elimina la publicidad.
  • ¿Cuál es la diferencia entre la URL normal y la URL embed de YouTube?
    • La URL normal de YouTube es https://www.youtube.com/watch?v=ID y sirve para ver el vídeo en la plataforma. La URL embed es https://www.youtube.com/embed/ID y es la que debes usar en el atributo src del iframe para incrustarlo en tu web.

✅ Conclusión

Insertar un vídeo de YouTube en HTML no es solo copiar un iframe: es entender cómo personalizarlo con parámetros, cómo hacerlo responsive para que se vea bien en cualquier dispositivo y cómo adaptarlo a la experiencia que quieres ofrecer en tu web.

Con los parámetros correctos en la URL y un buen sistema responsive —ya sea con CSS o con JavaScript— no solo mejoras la estética de tu página: también mejoras la retención de los visitantes, el SEO y la claridad de tus contenidos. El vídeo deja de ser un elemento que "simplemente está ahí" y se convierte en una pieza integrada y funcional de tu diseño.

Aprende cómo insertar un vídeo de YouTube en HTML paso a paso. Incluye código para iframe, parámetros avanzadas y cómo hacerlo responsive con CSS y JS.


Únete a la comunidad de desarrolladores que han decidido dejar de picar código y empezar a construir productos reales. Recibe mis mejores trucos de arquitectura cada semana:

Acepto recibir anuncios de interes sobre este Blog.

Web Atributo Video YouTube Propiedades CSS Responsive JavaScript

Su experiencia en este sitio será mejorada con el uso de cookies.