iFrame e incorporamenti
Incorpora contenuti esterni come Vimeo, CodePen, Figma e Loom nella documentazione, con stile automatico e dimensionamento responsive.
Ogni <iframe> nella documentazione riceve angoli arrotondati, un bordo incorniciato e una spaziatura coerente con il resto della pagina. Non servono div wrapper o classi di utilità.
Stile automatico
Jamdesk applica questa cornice a ogni iframe al momento del rendering:
| Proprietà | Valore | Descrizione |
|---|---|---|
| Raggio del bordo | 0.5rem | Angoli arrotondati del contenuto |
| Larghezza della cornice | 8px | Spaziatura visiva attorno al contenuto |
| Bordo | 1px | Bordo discreto nel colore del tema |
| Spaziatura | 1rem + 9px | Margine sopra e sotto |
Il colore della cornice deriva da --color-bg-secondary. La linea del bordo usa --color-border. Queste proprietà personalizzate CSS seguono il tema, inclusa la modalità scura.
Incorporare contenuti esterni
Un incorporamento base usa un tag iframe HTML standard:
<iframe
src="https://example.com/embed"
width="100%"
height="400"
title="Description of embedded content"
/>Includi sempre un attributo title. Gli screen reader lo annunciano. Indica inoltre a chi legge il sorgente della pagina che cosa contiene l'incorporamento.
Dimensionamento reattivo
La maggior parte dei provider di incorporamento restituisce contenuti con un rapporto d'aspetto fisso. L'utility aspect-video di Tailwind mantiene l'iframe a 16:9 indipendentemente dalla larghezza della viewport. w-full lo estende fino a riempire il contenitore padre:
<iframe
className="w-full aspect-video"
src="https://example.com/embed"
title="16:9 responsive embed"
/>w-full imposta width: 100% tramite Tailwind. Senza di esso, l'iframe usa la larghezza predefinita del browser (di solito 300px), che su schermi larghi appare rotta.
Usa la sintassi di Tailwind per rapporti d'aspetto arbitrari con contenuti che non sono 16:9, come un prototipo Figma o una dashboard:
<iframe
className="w-full aspect-[4/3]"
src="https://example.com/embed"
title="4:3 responsive embed"
/>Sostituisci 4/3 con il rapporto più adatto al contenuto. aspect-[1/1] per incorporamenti quadrati, aspect-[21/9] per l'ultrawide, e così via.
Vimeo
Incorpora un video Vimeo con un iframe standard che punta all'URL del player:
<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
/>Sostituisci VIDEO_ID con l'ID numerico di qualsiasi URL Vimeo (il numero dopo vimeo.com/). L'attributo allow concede al player incorporato i permessi per schermo intero e picture-in-picture.
Usa il componente dedicato <YouTube> per i video YouTube invece di un iframe grezzo. Carica il player in modo differito e rimuove i suggerimenti di video correlati.
Incorporamenti comuni
Recupera l'URL di incorporamento dal pulsante "Embed" di CodePen. Il parametro default-tab controlla quale pannello viene mostrato per primo (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
/>Gli incorporamenti CodeSandbox accettano parametri di query per dimensione del font, tema e file da mostrare. L'attributo sandbox controlla ciò che l'iframe può fare. CodeSandbox richiede diversi permessi per eseguire il codice nel browser.
<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"
/>Apri un file Figma, fai clic su Share, quindi su Get embed code. L'URL va nell'attributo src. Gli incorporamenti Figma devono essere alti 450px o più. Altezze inferiori tagliano la barra degli strumenti.
<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 l'ID del video da qualsiasi link di condivisione Loom (la stringa dopo loom.com/share/). Per impostazione predefinita, gli incorporamenti Loom si avviano al passaggio del mouse.
<iframe
src="https://www.loom.com/embed/VIDEO_ID"
width="100%"
height="400"
allowFullScreen
/>