iFrames y elementos incrustados
Incrusta contenido externo como Vimeo, CodePen, Figma y Loom en tus docs con estilo automático y tamaño responsivo.
Todo <iframe> en tus docs recibe un tratamiento visual desde el primer momento: esquinas redondeadas, un borde enmarcado y un espaciado que coincide con el resto de tu página. No necesitas agregar divs contenedores ni clases de utilidad para que esto se active.
Estilo automático
Jamdesk aplica un marco consistente a todos los iframes al momento de renderizar. Esto es lo que recibe cada iframe:
| Propiedad | Valor | Descripción |
|---|---|---|
| Radio del borde | 0.5rem | Esquinas redondeadas en el contenido |
| Ancho del marco | 8px | Relleno visual alrededor del contenido |
| Borde | 1px | Borde sutil en el color del tema |
| Espaciado | 1rem + 9px | Margen arriba y abajo |
El color del marco proviene de --color-bg-secondary y la línea del borde usa --color-border. Ambas son propiedades personalizadas de CSS vinculadas a tu tema, así que el modo claro y el modo oscuro obtienen los colores correctos sin trabajo adicional de tu parte.
Incrustar contenido externo
Un embed básico usa una etiqueta iframe HTML estándar:
<iframe
src="https://example.com/embed"
width="100%"
height="400"
title="Description of embedded content"
/>Incluye siempre un atributo title. Los lectores de pantalla lo anuncian, y ayuda a cualquiera que revise el código fuente de tu página a entender qué contiene cada embed.
Tamaño responsivo
La mayoría de los proveedores de embeds devuelven contenido con una relación de aspecto fija. La utilidad aspect-video de Tailwind mantiene el iframe en 16:9 sin importar el ancho del viewport, y w-full lo estira para llenar el contenedor padre:
<iframe
className="w-full aspect-video"
src="https://example.com/embed"
title="16:9 responsive embed"
/>w-full establece width: 100% mediante Tailwind. Sin esto, el iframe usa por defecto el ancho incorporado del navegador (normalmente 300px), lo que se ve mal en pantallas anchas.
Para contenido que no es 16:9, como un prototipo de Figma o un dashboard, usa la sintaxis de relación de aspecto arbitraria de Tailwind:
<iframe
className="w-full aspect-[4/3]"
src="https://example.com/embed"
title="4:3 responsive embed"
/>Reemplaza 4/3 con la relación que se ajuste al contenido. aspect-[1/1] para embeds cuadrados, aspect-[21/9] para ultrawide, y así sucesivamente.
Vimeo
Los videos de Vimeo se incrustan mediante un iframe estándar que apunta a la URL de su reproductor:
<iframe
className="w-full aspect-video rounded-xl"
src="https://player.vimeo.com/video/VIDEO_ID"
title="Vimeo video player"
allow="autoplay; fullscreen; picture-in-picture"
allowFullScreen
/>Reemplaza VIDEO_ID con el ID numérico de cualquier URL de Vimeo (el número después de vimeo.com/). El atributo allow otorga permisos de pantalla completa y picture-in-picture al reproductor incrustado.
Para videos de YouTube, usa el componente <YouTube> dedicado en lugar de un iframe sin procesar. Este carga el reproductor de forma diferida y elimina las sugerencias de videos relacionados.
Embeds comunes
Obtén la URL de embed desde el botón "Embed" de CodePen. El parámetro default-tab controla qué panel se muestra primero (result, html, css o js).
<iframe
height="400"
style={{width: '100%'}}
src="https://codepen.io/USERNAME/embed/PEN_ID?default-tab=result"
title="CodePen Embed"
allowFullScreen
/>Los embeds de CodeSandbox admiten parámetros de consulta para el tamaño de fuente, el tema y qué archivo mostrar. El atributo sandbox controla qué puede hacer el iframe. CodeSandbox necesita varios permisos para ejecutar código en el navegador.
<iframe
src="https://codesandbox.io/embed/SANDBOX_ID?fontsize=14&theme=dark"
style={{width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden'}}
title="CodeSandbox"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>Abre un archivo de Figma, haz clic en Share, luego en Get embed code. La URL va en el atributo src. Los embeds de Figma funcionan mejor con 450px o más de altura; alturas menores recortan la barra de herramientas.
<iframe
style={{border: '1px solid rgba(0, 0, 0, 0.1)'}}
width="100%"
height="450"
src="https://www.figma.com/embed?embed_host=share&url=FIGMA_URL"
allowFullScreen
/>Copia el ID del video desde cualquier enlace de compartir de Loom (la cadena después de loom.com/share/). Los embeds de Loom se reproducen automáticamente al pasar el cursor por defecto.
<iframe
src="https://www.loom.com/embed/VIDEO_ID"
width="100%"
height="400"
allowFullScreen
/>