¿Qué es un código de incrustación? Guía para PDF, flipbooks y vídeos

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

Un código de incrustación es un fragmento de HTML que muestra contenido externo — un vídeo, un PDF, un flipbook, un mapa, un tuit — dentro de tu propia página web. Cuando un lector carga tu página, el navegador solicita el contenido externo y lo muestra en línea, como si formara parte de tu sitio.

La tecnología subyacente más habitual es el elemento HTML <iframe>, que carga otra página web dentro de un marco rectangular en la tuya.

Estructura básica de un código de incrustación

Un código de incrustación típico tiene este aspecto:

<iframe
  src="https://example.com/your-content"
  width="100%"
  height="600"
  allowfullscreen
  frameborder="0"
></iframe>

Todo código de incrustación incluye cuatro elementos:

• src — la URL del contenido a incrustar.
• width y height — las dimensiones del marco (en píxeles o en porcentaje).
• Atributos de permisos — allowfullscreen, allow="autoplay" o flags sandbox que permiten al contenido incrustado usar ciertas funciones del navegador.
• Estilo opcional — atributos frameborder, style para dar acabado visual.

Cuando un lector abre tu página, el navegador detecta la etiqueta <iframe>, solicita la URL de src y muestra la página devuelta dentro del marco.

De dónde vienen los códigos de incrustación

Cada plataforma que admite incrustación genera su propio código. Lo copias de la plataforma y lo pegas en tu sitio:

• YouTube / Vimeo — botón Compartir → Insertar → copia el código iframe.
• Google Maps — Compartir → Incrustar un mapa → copia el iframe.
• Twitter / X — Publicación → Insertar este post → copia.
• FlipLink — cada publicación genera un código de incrustación automáticamente, o usa la herramienta gratuita embed-pdf para incrustaciones puntuales sin registro.

Cada plataforma ajusta las dimensiones, permisos y comportamiento de carga del iframe a su contenido. Rara vez necesitarás modificar el código generado — copiar, pegar, listo.

¿En qué se diferencia un código de incrustación de un enlace?

Un enlace envía al lector fuera de tu página hacia el contenido externo. Un código de incrustación lo mantiene en tu página mientras muestra el contenido externo en línea.

• Enlace: <a href="...">Ver vídeo</a> — clic para salir de la página.
• Incrustación: <iframe src="..."> — el contenido aparece en línea, sin navegación.

Esta diferencia importa para la tasa de rebote, el engagement y la analítica. Una incrustación permite medir visualizaciones sin perder al visitante en otro dominio.

Incrustar un PDF: cuatro enfoques

La incrustación de PDF ha evolucionado más allá del iframe básico. Los cuatro enfoques, en orden de simplicidad:

1. Etiqueta nativa <embed> u <object>

<embed src="document.pdf" type="application/pdf" width="100%" height="600" />

Funciona en navegadores de escritorio, pero de forma inconsistente en móvil. Los lectores ven el visor PDF por defecto del navegador, que varía por dispositivo y pierde toda la interactividad.

2. Iframe del visor de Google Docs

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600"></iframe>

Gratis, funciona en móvil, pero con poco control sobre la apariencia del visor y sin analítica.

3. Visor personalizado basado en PDF.js

Carga la biblioteca PDF.js de Mozilla en tu sitio e incrusta un visor personalizado. Control total sobre marca y comportamiento, pero requiere desarrollo y mantenimiento continuo.

4. Iframe de plataforma flipbook (recomendado para empresas)

<iframe src="https://your-flipbook-url" width="100%" height="600" allowfullscreen></iframe>

Sube el PDF a una plataforma de flipbook, copia el código generado. Obtienes enlaces clicables, animación de cambio de página, analítica y captación de leads — sin código personalizado y con experiencia móvil consistente. Consulta cómo incrustar un PDF en tu web para un recorrido completo por plataforma.

Hacer que los códigos de incrustación sean responsive

El valor por defecto width="640" height="360" se rompe en móvil. Para incrustaciones responsive, envuelve el iframe en un contenedor que mantenga la relación de aspecto:

<div style="position:relative; padding-bottom:141.4%; height:0;">
  <iframe
    src="..."
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

El valor de padding-bottom fija la relación de aspecto (141,4% = A4 vertical; 56,25% = vídeo 16:9; 75% = 4:3).

Seguridad: qué hace sandbox

El contenido incrustado se ejecuta en el navegador del visitante, por lo que puede ejecutar JavaScript, leer cookies de su propio dominio e incluso navegar por la página padre. El atributo sandbox restringe lo que el contenido incrustado puede hacer:

<iframe src="..." sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

Flags habituales:

• allow-scripts — permite que se ejecute JavaScript
• allow-forms — permite el envío de formularios
• allow-same-origin — trata el contenido como primer-partido (necesario para estado de sesión)
• allow-popups — permite enlaces con target="_blank"

Para incrustaciones de PDF, el valor por defecto (sin sandbox) suele estar bien a menos que estés incrustando contenido no confiable subido por usuarios.

Errores habituales al incrustar

• Ancho fijo en píxeles. Usar width="600" se rompe en móviles estrechos. Usa width="100%" o el contenedor responsive.
• Falta allowfullscreen. Los usuarios no pueden expandir a pantalla completa vídeos o flipbooks.
• Iframes eliminados por constructores de páginas. Algunos editores de CMS (Squarespace Embed Block, WordPress sin el bloque HTML personalizado) eliminan las etiquetas iframe. Pega siempre los códigos en un bloque de "Código" o "HTML personalizado".
• Errores cross-origin en consola. Algunas incrustaciones necesitan cabeceras CORS concretas del origen; si la incrustación se ve rota, revisa la consola del navegador.
• Vista previa rota en el editor. Muchos editores CMS no renderizan iframes en modo edición — comprueba siempre en la página publicada, no en la vista previa.

Preguntas frecuentes

¿Un iframe es lo mismo que un código de incrustación?

Un iframe es un tipo de código de incrustación — el más habitual. Los códigos de incrustación también pueden usar <embed>, <object>, <video> o widgets JavaScript específicos de la plataforma. Para PDF y flipbooks, los iframes son el estándar.

¿Incrustar un PDF ralentiza mi sitio?

El iframe carga el PDF bajo demanda, así que solo afecta al rendimiento si el usuario se desplaza hasta él. Usa loading="lazy" en el iframe para posponer la carga hasta que la incrustación esté cerca del viewport.

¿Puedo personalizar la apariencia del contenido incrustado?

Puedes controlar el marco exterior (tamaño, borde, posición) con CSS sobre el iframe. La apariencia del contenido interno depende de la plataforma que genera el código. FlipLink permite aplicar colores de marca y estilo personalizado al visor incrustado.

¿Funciona el código de incrustación en cualquier constructor web?

Cualquier sitio que admita pegar HTML en bruto (WordPress HTML personalizado, Wix iframe HTML, Squarespace Code Block, Webflow Embed, Shopify Custom Liquid, Notion /embed) acepta códigos de incrustación iframe. Algunos constructores tienen restricciones adicionales — consulta nuestra guía de incrustación por plataforma para los detalles.

¿Cómo obtengo un código de incrustación para mi PDF?

Usa la herramienta gratuita embed-pdf: sube un PDF y obtén un código iframe en segundos. Sin registro para incrustaciones puntuales.

Lecturas relacionadas

• Cómo incrustar un PDF en una web: 5 métodos comparados
• Cómo insertar un PDF en una web, documento o correo
• Cómo incrustar un flipbook en Squarespace
• Cómo incrustar un flipbook en Shopify
• ¿Qué es un PDF interactivo?