Incrustación Responsiva

Una incrustación responsiva es un fragmento de [código de incrustación](/glossary/embed-code) que escala automáticamente el contenido incrustado para coincidir con el ancho y alto del contenedor padre o la pantalla del visitante. A diferencia de los [iframes](/glossary/iframe) de dimensiones fijas que crean barras de desplazamiento horizontales o dejan espacios blancos vacíos, las incrustaciones responsivas usan anchos basados en porcentajes y técnicas CSS de aspect-ratio para llenar el espacio disponible de forma fluida. El contenido mantiene sus proporciones tanto si el contenedor tiene 1440 píxeles de ancho en un monitor de escritorio como 375 píxeles en un smartphone. Este enfoque garantiza que los flipbooks, documentos, videos o contenido interactivo incrustados se vean correctamente en todos los dispositivos sin redimensionamiento manual ni código específico por dispositivo.

Los lectores acceden al contenido desde una amplia variedad de dispositivos y tamaños de pantalla. Si un [flipbook](/glossary/flipbook) incrustado se desborda en móvil, los lectores deben desplazarse horizontalmente — una señal clara de que la página no está optimizada. Si la incrustación aparece diminuta en un monitor de pantalla ancha, el contenido se vuelve ilegible. Cualquiera de las dos situaciones aumenta las tasas de rebote y perjudica la credibilidad de la página anfitriona. Las incrustaciones responsivas eliminan estos problemas, manteniendo las publicaciones profesionales y accesibles en todas partes. También protegen los [Core Web Vitals](/glossary/core-web-vitals) del sitio al reservar el espacio de diseño correcto antes de que se cargue el contenido, previniendo el [Cumulative Layout Shift](/glossary/cls).

FlipLink genera códigos de incrustación responsivos listos para usar para cada flipbook y documento publicado. Copias el fragmento de las opciones de compartir de tu publicación y lo pegas en cualquier sitio web, blog o CMS. El [iframe](/glossary/iframe) se ajusta automáticamente al ancho del contenedor, y el visor del flipbook escala las páginas en consecuencia. El código de incrustación incluye carga diferida por defecto, por lo que el flipbook solo se carga cuando entra en la vista, manteniendo la página rápida. También puedes usar la función [Incrustación de imagen clicable](/features/clickable-image-embed) para colocar una miniatura que abre el visor responsivo completo al hacer clic — útil cuando quieres mostrar una vista previa sin cargar inmediatamente el visor completo.

Las incrustaciones responsivas funcionan típicamente a través de una de dos técnicas CSS: - **Contenedor aspect-ratio** — un `div` envolvente con la propiedad CSS `aspect-ratio` (ej. `aspect-ratio: 16 / 9`) y `width: 100%`. El iframe interno se configura para llenar completamente el envolvente. Este es el enfoque moderno y es compatible con todos los navegadores actuales. - **Truco de padding-bottom** — una técnica más antigua donde el envolvente usa `padding-bottom` como porcentaje (ej. `56.25%` para 16:9) para crear la altura correcta relativa al ancho. El iframe se posiciona de forma absoluta dentro. Este método todavía se usa ampliamente para compatibilidad retroactiva. El código de incrustación de FlipLink usa el enfoque de aspect-ratio con un respaldo, asegurando compatibilidad entre navegadores. Las propiedades CSS clave son `width: 100%`, `height: auto` y `border: none` en el iframe, combinadas con la proporción del envolvente. El resultado es una incrustación que toma el ancho completo del contenedor y escala su altura proporcionalmente.

- **Coloca la incrustación dentro de un contenedor con ancho limitado** — si pegas el código en una sección de ancho completo, el flipbook se estirará para llenar todo el [viewport](/glossary/viewport). Usa una columna de contenido o un envolvente con max-width para mantenerlo a un tamaño de lectura cómodo. - **Evita establecer alturas fijas en píxeles** — esto anula el propósito de la incrustación responsiva. Deja que el aspect ratio controle la altura automáticamente. - **Prueba en múltiples tamaños de pantalla** — previsualiza tu página en escritorio, tableta y teléfono para confirmar que la incrustación escala correctamente. La simulación de dispositivos de DevTools del navegador funciona bien para comprobaciones rápidas. - **Usa carga diferida para incrustaciones debajo del pliegue** — el código de FlipLink incluye carga diferida por defecto, pero si personalizas el código, mantén el atributo `loading="lazy"` para evitar ralentizar la carga inicial. - **Una incrustación por sección del viewport** — incrustar múltiples flipbooks en una sola vista puede abrumar a los lectores y ralentizar la página. Espácialos o usa una [incrustación de imagen clicable](/features/clickable-image-embed) para que los lectores elijan qué publicación abrir.

1. **Publicar el flipbook** — el código de incrustación solo está disponible después de la publicación 2. **Copiar el código de incrustación** — ir a las opciones de compartir de la publicación y copiar el fragmento responsivo 3. **Pegar en la página** — agregar el código al editor HTML del sitio, al bloque de incrustación del CMS o al widget del constructor de páginas 4. **Verificar el ancho del contenedor** — asegurarse de que el elemento padre tenga un ancho definido (porcentaje o max-width) para que la incrustación sepa cuánto renderizar 5. **Previsualizar en todos los dispositivos** — comprobar las vistas de escritorio, tableta y móvil para confirmar el escalado proporcional 6. **Comprobar la velocidad de la página** — ejecutar una auditoría de Lighthouse para confirmar que la incrustación no impacte negativamente los tiempos de carga ni los puntajes de layout shift 7. **Considerar el whitelisting de dominios** — usar [whitelisting de dominios](/glossary/domain-whitelisting) para restringir qué sitios web pueden incrustar las publicaciones

Una incrustación responsiva garantiza que el flipbook se vea correcto en cada pantalla sin ajustes manuales ni código específico por dispositivo. Es la forma más simple de colocar publicaciones interactivas en cualquier sitio web manteniendo una experiencia profesional y de carga rápida para cada lector.