¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

Insertar un video de YouTube en tu página web es una de esas tareas que parecen sencillas… hasta que empiezan los problemas: tamaños fijos, vídeos que no son responsive, parámetros que nadie explica bien, etc.

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 básico hasta configuraciones avanzadas.

Qué significa realmente “insertar un video de YouTube”

Cómo funciona el iframe por dentro

Cuando haces clic en Compartir → Insertar, YouTube te entrega un bloque HTML <iframe>.
Ese iframe no es más que una “ventana” dentro de tu web que muestra el reproductor de YouTube.

Por ejemplo:

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

Ese src es lo único que necesitas cambiar si quieres otro video.

Ventajas de incrustar un vídeo en vez de subirlo

  • Yo descubrí esto rápido: usar el vídeo directamente desde YouTube te quita toneladas de trabajo:
  • No tienes que convertir el vídeo a múltiples formatos.
  • No consumes ancho de banda propio.
  • Te beneficias de las funciones sociales de YouTube.
  • El reproductor ya viene optimizado para la mayoría de navegadores.

Cómo obtener el código de inserción en YouTube

Ruta rápida: Compartir → Insertar

  • Abre el vídeo.
  • Haz clic en Compartir.
  • Selecciona Insertar.
  • Copia el iframe que aparece.

Dónde pegar el código en tu HTML

Dentro de <body>:

<body>
   <h1>Mi video</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 cual puedes encontrar toda clases de vídeos, Youtube ha crecido en todos los aspectos en los últimos años dando opciones para todo inclusive para insertar vídeos fácilmente en nuestra web:

Insertar un Vídeo en Youtube

Seleccione un vídeo de YouTube -> clic en "Compartir"-> clic en la pestaña "Insertar"

Una vez que nos hagamos con nuestro vídeo que deseamos insertar en nuestra página web HTML; en nuestro caso, queremos insertar el siguiente vídeo:

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

Empleando directamente los vídeos de YouTube podemos ahorrar mucho trabajo; por ejemplo, evitar convertir vídeos en distintos formatos para el soporte de distintos navegadores, las distintas opciones sociales para compartir el vídeo de YouTube, etc.

Errores típicos al copiar el embed

  • Pegar el iframe en <head> en lugar de <body>.
  • Romper la URL añadiendo parámetros con ? dos veces.
  • Borrar accidentalmente allowfullscreen.

Analizando los atributos del HTML anterior

Observando el código anterior obtenido desde YouTube, nos damos cuenta que no es más que un simple HTML, específicamente un iframe, con una serie de atributos que veremos a continuación:

  • Los atributos width y height para especificar las dimensiones del vídeo.
  • El atributo allowfullscreen para habilitar el modo Full Screen o que el vídeo pueda ocupar toda la pantalla.
  • Finalmente el atributo src en el cual se coloca la URL del vídeo de YouTube; este es el único atributo que se debe cambiar en caso de querer colocar otro vídeo de YouTube; además del fuente o vídeo a referenciar de Youtube, es posible establecer otros parámetros en la URL:

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

En esta sección veremos algunos de los principales parámetros a colocar en la URL de los vídeos:

autohide Indican el estado de los controles del vídeo:
  • Si se establece en cero (0) significa que los controles son siempre visibles: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=0"   allowfullscreen></iframe>
  • Si se establece en uno (1) significa que los controles se esconden al iniciar la reproducción del vídeo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=1"   allowfullscreen></iframe>
  • (Por defecto) Si se establece en dos (2) y dependiendo de las proporciones del vídeo variará el comportamiento de los controles; para la relación de aspecto igual a 16:9 o 4:3 se comportará igual que si se se estableciera el valor en uno, cualquier otra relación de aspecto se comportará como si el valor se estableciera en cero: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=2"   allowfullscreen></iframe>
autoplay Indica el comportamiento del vídeo al terminar su carga:
  • (Por defecto) Si se establece en cero (0) significa que el vídeo no inicia automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=0"   allowfullscreen></iframe>
  • Si se establece en uno (1) significa que el vídeo inicia automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1"   allowfullscreen></iframe>
controls Ofrece distintas opciones para indicar el comportamiento de los controles del vídeo:
  • Si se establece en cero (0) significa que los controles no se muestran; por lo tanto, el reproductor Flash carga automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=0"   allowfullscreen></iframe>
  • (Por defecto) Si se establece en uno (1) significa que los controles se muestran y el reproductor Flash se carga automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=1"   allowfullscreen></iframe>
  • Si se establece en dos (2) significa que los controles se muestran pero el el reproductor Flash se carga cuando el usuario inicia la reproducción: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=2"   allowfullscreen></iframe>
loop Aquí se especifica si el vídeo debe reproducirse nuevamente una vez culmine (loop:
  • (Por defecto) Si se establece en cero (0) el vídeo no se reproduce al terminar el mismo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?loop=0"   allowfullscreen></iframe>
  • Si se establece en uno (1) el vídeo se vuelve a reproducir al terminar el mismo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?loop=1"   allowfullscreen></iframe>
playlist Esta opción permite crear PlayList; para ello debemos separar los vídeos por comas (,). 
showinfo Esta opción permite indicar si mostrar (1) o no (0) la información en en título del vídeo:<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?showinfo=1"   allowfullscreen></iframe>                    
disablekb Esta opción permite desactivar (1) o activar (0) los controles de teclado:<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"   allowfullscreen></iframe>                    
start Permite especificar (en segundos) en base a un valor entero en donde comienza el vídeo; por ejemplo, si quisiéramos comenzar un vídeo en 5 segundos:<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?start=5"   allowfullscreen></iframe>            
end Permite especificar (en segundos) en base a un valor entero cuando el reproductor se debe detener; por ejemplo, si quisiéramos detener un vídeo en 5 segundos:<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?end=5"   allowfullscreen></iframe>            

Ajustes de visualización: controles, autohide, showinfo

  • autohide
    • autohide=0 → Controles siempre visibles
    • autohide=1 → Se esconden al reproducir
    • autohide=2 → Comportamiento según proporción del vídeo
  • Ejemplo:
    • <iframe src="https://www.youtube.com/embed/ID?autohide=1" allowfullscreen></iframe>
  • controls
    • controls=0 → Sin controles
    • controls=1 → Visibles (default)
    • controls=2 → Se muestran solo cuando el usuario interactúa
  • showinfo (obsoleto pero aún útil en algunos embeds antiguos)
    • showinfo=0 → Quita título
    • showinfo=1 → Muestra título

Videos de YouTube adaptables o responsive

Si quieres saber como hacer responsive o adaptables los videos de YouTube puedes consultar la siguiente entrada en la cual tratamos ese tema:

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

  • Reproducción: autoplay, loop, start, end
    • <iframe src="https://www.youtube.com/embed/ID?autoplay=1" allowfullscreen></iframe>
  • loop
    • Para que funcione debes añadir playlist:
    • <iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID" allowfullscreen></iframe>
  • start / end
    • Perfectos si quieres destacar una parte:
    • <iframe src="https://www.youtube.com/embed/ID?start=5&end=20"></iframe>
  • Listas y combinaciones avanzadas
    • <iframe src="https://www.youtube.com/embed/ID?autoplay=1&controls=0&loop=1&playlist=ID" allowfullscreen></iframe>

Hacer el video responsive (que se adapte a móviles y pantallas grandes): dos soluciones con CSS y JavaScript

Incrustar vídeo de YouTube y que se vea responsive: dos soluciones con CSS y JavaScript

YouTube es una poderosa herramienta para ver vídeos en línea de todo tipo, como de ocio como de manera profesional y que de adapta perfectamente a muchos otros nichos como el blogging.

YouTube permite insertar fácilmente vídeos en nuestra web pero lo que pueda que no sea tan fácil es que el vídeo se comporte de manera responsive; lo que quiere decir que el vídeo se adapte a la web, al tamaño de la web que depende del tamaño de la pantalla y de esta forma que fácilmente podemos incorporar vídeos de YouTube en nuestra web como vimos en una entrada anterior y que sean responsive.

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 en formato buzón.

Aquí tienes dos soluciones probadas.

Cuando embebemos el código de vídeo en nuestra web y lo probamos en un teléfono o tablet el resultado es bastante desagradable... vemos que YouTube no se encarga de re-escalar el video correctamente según el tamaño de la pantalla; si analizamos el video vemos que el mismo cuenta con un tamaño fijo definido por los atributos height y width.

Por lo tanto el código que nos da YouTube ya tiene un tamaño predefinido indicando el ancho y largo del mismo y pasa de largo que el contenido sea responsive.

Cuando intentamos hacer un video de YouTube responsive vemos que nos da muchos problemas, al intentar escalar el vídeo, que se vea correctamente y no conseguimos que el video sea responsive en móviles, tabletas y PC; pero no te preocupes que traemos un par de soluciones las cuales puedes emplear una u otra dependiendo de tus necesidades.

Cómo hacer un video de YouTube responsive

Para este tema, de como hacer que nuestros videos luzcan como dios manda, sin corte y se puedan consumir o ver correctamente, presentamos dos soluciones, una de ellas es mediante CSS y poco más general y la otra es mediante JavaScript la cual es más completa y permite adaptar los videos correctamente según las proporciones del video.

Puedes emplearlas en conjunto o individuales y experimentar como tu desees para que tus videos luzcan como tu quieras; el primero que veremos será con CSS.

Primera opción responsive para el video con CSS

Anteriormente hablamos sobre cómo colocar un en este video veremos como hacer un video de YouTube responsive para que se vea correctamente; como indicamos más adelante necesitamos un contenedor para colocar el iframe que contiene el vídeo; para eso podemos aplicar un CSS como el siguiente:

.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 CSS anterior permite al contenedor tener un espacio fijo provisto por el padding-bottom para poder escalar el video según las proporciones de la ventana; luego indicamos el tamaño máximo a nuestro vídeo tanto en ancho como en lo alto (y aquí entra en juego el padding-bottom que indicamos anteriormente que nos permite tener bajo control el height del iframe del video de Youtube) y de esta forma obtenemos nuestro video adaptable a la pantalla del teléfono, PC, tableta o cualquier otro dispositivo.

Definiendo el HTML de nuestro vídeo YouTube

Puedes retirar (o no) los atributos que agrega YouTube al momento de exportar el vídeo para definir el alto y el ancho fijo; es decir; si este es nuestro vídeo:

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

Y este es el resultado:

video adaptativo con CSS

Puedes consultar el ejemplo en:

Ejemplo Js

Segunda opción responsive para el video con JavaScript: (ideal si usas varios vídeos)

Aunque no es una solución infalible la presentada anteriormente con CSS y puede traernos algunos problemas dependiendo de las proporciones o dimensiones del los videos que vamos a acoplar; sin embargo, es una forma rápida que tenemos para hacer nuestros videos de YouTube adaptativos sin muchos problemas pero es un poco más elaborada y requiere de JavaScript con la cual si podemos adaptar el video de YouTube mostrado en base a su proporción y que sea escalable, adaptativo o responsive.

Para ello lo primero que tenemos que hacer es obtener todos los videos de YouTUbe; que lo podemos hacer fácilmente con el siguiente JavaScript; lo primero que hacemos es seleccionar todos los vídeos cuyo atributo src contengan la URL de YouTube; para eso empleamos el selector de contención *:

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

Aquí empleamos jQuery, pero puedes traducir el código fácilmente a JavaScript nativo por si no usar jQuery; lo siguiente que hacemos es seleccionar el contenedor padre directo de nuestro video, en el ejemplo presentado en esta entrada, sería un section, pero usted ponga el suyo:

$v_container = $("body section")

Paso seguido, calculamos las proporciones, el aspecto radio, o como quieras llamarle del grupo de videos de YouTube obtenido y lo guardamos en un attr que definimos nosotros; este código solo se ejecuta una vez al momento de la carga de la web, para eso se emplea el siguiente código:

$videosYoutube.each(function () {
	$(this)
			.attr('proportion', this.height / this.width)
			//removemos las dimenciones del video
			.removeAttr('height')
			.removeAttr('width');

El siguiente paso es definir el callback para cuando se redimensiona la ventana y aplicar el reescalado de nuestro vídeo:

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

Este método se ejecuta cada vez que sea reescalada la ventana o la página web y por lo tanto reescala el vídeo para hacerlo adaptativo según varíe el tamaño del contenedor.

Finalmente el código para hacer nuestros videos responsive en YouTube:

// Find all YouTube videos
var $videosYoutube = $("iframe[src*='www.youtube.com']"),
		// el padre contenedor
		$v_container = $("body section");
// iteramos todos los videos de youtube y guardamos sus proporciones
$videosYoutube.each(function () {
	$(this)
			.attr('proportion', this.height / this.width)
			//removemos las dimenciones del video
			.removeAttr('height')
			.removeAttr('width');
});
// Cuando se redimenciona la ventana
$(window).resize(function () {
	var container_width = $v_container.width();
	// Resize all videos according to their own aspect ratio
	$videosYoutube.each(function () {
		var $el = $(this);
		$el
				.width(container_width)
				.height(container_width * $el.attr('proportion'));
	});
}).resize(); // invocamos el método a la carga

Puedes ver el ejemplo final en el siguiente enlace:

Ejemplo Js

Estos códigos puedes emplearlos con otros sistemas de videos como Vime para que también los videos se adapten al tamaño de la pantalla; funcionan perfectamente para que nuestros videos sean responsive de una vez por todas.

Descargar ejemplos

Buenas prácticas para insertar videos en HTML

  • Dimensiones recomendadas
    • Desktop: 560–800px de ancho
    • Móvil: siempre responsive
  • Optimización
    • Usa lazy-loading:
    • <iframe loading="lazy" ...></iframe>
  • SEO y UX
    • Usa un título descriptivo en el H2/H3 que rodea al vídeo.
    • Añade texto antes y después del video para contextualizarlo.

Ejemplos completos listos para copiar

  • Embed básico
    • <iframe src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>
  • Embed personalizado
    • <iframe src="https://www.youtube.com/embed/ID?autoplay=1&controls=1&start=10" allowfullscreen></iframe>
  • Embed responsive
    • <div class="v-container">
   <iframe src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>
</div>

Extra: Colocando un video de YouTube de background pero solo sonido

Podemos ocultar el iframe de nuestra página y con el atributo loop para que se repita infinitamente el audio del vídeo y otro para que arranque al cargar la web:

<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>

Es importante notar que si el elemento tiene height="0" y width="0", la "responsividad" deja de ser un factor visual (porque no hay nada que ver), pero sigue siendo importante para que el DOM no reserve espacios en blanco extraños en versiones móviles.

Preguntas frecuentes

  • ¿Por qué mi iframe de YouTube no es responsive?
    • Porque YouTube entrega medidas fijas. Necesitas un contenedor con proporción (CSS) o un sistema JS de reescalado.
  • ¿Cómo quitar los controles?
    • controls=0.
  • ¿Cómo evitar que YouTube muestre videos sugeridos?
    • Usa:
      ?rel=0
      (YouTube ahora solo muestra sugeridos del mismo canal, no de otros).

✅ Conclusión

Insertar videos de YouTube en HTML no es solo copiar un iframe: es entender cómo personalizarlo, cómo hacerlo responsive y cómo adaptarlo a la experiencia que quieres dar en tu web.

Integrando los parámetros correctos y un buen sistema responsive, no solo mejoras la estética: también mejoras la retención, el SEO y la claridad de tus contenidos.

Acepto recibir anuncios de interes sobre este Blog.

YouTube es una plataforma de contenido digital en la cual puedes encontrar toda clases de vídeos además de brindar opciones que permiten insertar vídeos fácilmente en nuestra web (HTML). También se explica como hacer que nuestros videos de YouTube o Vime sean responsive; se emplea CSS o JavaScript para lograr que los videos sean adaptables.

| 👤 Andrés Cruz

🇺🇸 In english
🏷️Web 🏷️Atributo 🏷️Video 🏷️YouTube 🏷️Propiedades 🏷️CSS 🏷️Responsive 🏷️JavaScript

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