¿Qué es un código de inserción?

Un código de inserción es un breve fragmento de HTML que el propietario de un sitio pega en una página para que un video de YouTube se reproduzca ahí, en lugar de ser accesible solo mediante un enlace. YouTube lo genera como un elemento <iframe> que apunta a una URL especial /embed/ del video.

Qué contiene un código de inserción

Como mínimo incluye una URL de origen con el ID del video, un ancho y alto (o en su lugar un contenedor responsivo) y un atributo title para la accesibilidad. Los parámetros opcionales controlan la reproducción automática, el tiempo de inicio, la visibilidad de los controles y más.

Cómo conseguir uno

Puedes copiar la versión propia de YouTube desde el panel Compartir bajo un video, o usar el generador de código de inserción de este sitio para añadir tamaño responsivo, modo de privacidad, tiempos de inicio y otras opciones que el panel estándar de YouTube no ofrece todas juntas.

Cómo se construye un código de inserción

Un código de inserción no es una cadena fija, sino que se compone de unas pocas piezas intercambiables. El dominio (youtube.com o el respetuoso con la privacidad youtube-nocookie.com) determina el comportamiento de las cookies. La ruta lleva un único ID de video o, en el caso de una lista de reproducción, la ruta videoseries con un parámetro list. Los parámetros de consulta como start, autoplay y controls van después de un signo de interrogación y modifican la reproducción. Y el marcado circundante, ya sean atributos fijos width/height o un div contenedor responsivo, determina cómo se dimensiona el reproductor en la página. Entender estas piezas separables facilita mucho leer, y editar a mano, un código de inserción que no generaste tú mismo.

Un ejemplo práctico

Supongamos que quieres mostrar un video de demostración de producto en una página de aterrizaje, respetuoso con la privacidad, comenzando a los 15 segundos para saltar una introducción, sin reproducción automática. El código de inserción resultante combina un dominio youtube-nocookie.com, un parámetro start=15 y un contenedor responsivo:

<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?start=15" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" title="Demo del producto" allowfullscreen loading="lazy"></iframe>
</div>

Cada parte de este fragmento corresponde a una elección: el dominio por privacidad, start=15 para saltar la intro, y el contenedor para el tamaño responsivo.

Código de inserción frente a un enlace normal

Vale la pena aclarar qué no es un código de inserción. Un enlace normal de YouTube (una URL watch o youtu.be) está pensado para compartirse y hacer clic; pegado como texto plano en una página, simplemente queda ahí como una URL, o se convierte automáticamente en una inserción en plataformas como WordPress que admiten oEmbed. Un código de inserción, en cambio, es HTML explícito que controlas directamente, con opciones de tamaño, privacidad y reproducción que un enlace normal no ofrece. Conceptos relacionados que vale la pena conocer son el elemento iframe del que depende el código y la diferencia entre la URL de inserción y la URL de visualización.

Preguntas frecuentes