Generatore di iframe: crea il codice embed per qualsiasi URL
Generatore di iframe
Generatore di iframe: codice embed responsive con anteprima | We.Inc
Crea il codice iframe per qualsiasi URL: proporzioni responsive o dimensione fissa, lazy loading, title, token sandbox, allow e referrer policy, con anteprima dal vivo.
Incolla l'indirizzo che vuoi incorporare, dai un titolo al frame, scegli una forma responsive o una dimensione fissa, e questo generatore scrive il tag iframe con lazy loading, token sandbox, permessi e una referrer policy. L'anteprima qui sotto carica il tuo indirizzo così puoi verificare che il sito consenta davvero di essere incorporato prima di incollare il codice.
Cosa scrive ogni opzione
Opzione
Attributo o stile
Default in questo strumento
Titolo
title="..."
Obbligatorio, usato dagli screen reader
Forma responsive
style="width:100%;aspect-ratio:16 / 9"
Dimensione fissa
width e height
Il default del browser è 300 per 150
Lazy loading
loading="lazy"
Attivo
Sandbox
sandbox="..."
Disattivato; spunta i token per limitare
Permessi
allow="fullscreen; ..."
solo fullscreen
Referrer
referrerpolicy="..."
La maggior parte degli snippet iframe che trovi online manca di almeno una delle cose che servono a un embed moderno: un titolo per le tecnologie assistive, il lazy loading per non rallentare la prima schermata, una dimensione responsive e l'insieme minimo di permessi. Questo strumento li scrive tutti per qualsiasi indirizzo. Per video, mappe e pagine di prenotazione di provider noti, il nostro generatore di codice embed converte anche i loro link di condivisione in link embed.
Incolla l'indirizzo https completo della pagina da incorporare e scrivi un titolo breve che dica cos'è.
Scegli Responsive con delle proporzioni, oppure Fissa con larghezza e altezza in pixel.
Lascia attivo il lazy loading a meno che l'embed non sia proprio in cima alla pagina.
Spunta i token sandbox se il contenuto non è del tutto fidato, e spunta solo i permessi di cui l'embed ha bisogno.
Premi Carica anteprima per vedere l'embed esattamente come lo descrive il codice, poi copia il codice.
Se l'anteprima mostra un riquadro grigio con connessione rifiutata, il sito vieta di essere incorporato. Nessun attributo può cambiarlo; consulta la nostra guida a questo errore.
Per video e mappe usa l'indirizzo embed del provider. I normali indirizzi delle loro pagine spesso non possono essere incorporati.
Mantieni allow il più ridotto possibile. Ogni funzionalità che elenchi, come fotocamera o geolocalizzazione, viene offerta al sito incorporato.
Tieni gli embed pesanti sotto la prima schermata così il lazy loading può fare il suo lavoro.
Non spuntare insieme allow-scripts e allow-same-origin per contenuti del tuo stesso sito; insieme annullano il sandbox.
Domande frequenti
Come rendo responsive un iframe?
Dagli width: 100% e un aspect-ratio come 16 / 9, e lascia l'altezza automatica. Il browser mantiene così la forma a ogni larghezza. Il vecchio trucco del wrapper con padding-top non serve più ora che aspect-ratio è ampiamente supportato.
Cosa fa loading="lazy" su un iframe?
Rimanda il caricamento finché il frame non si avvicina alla parte visibile della pagina. eager, che carica subito, è il default. Il lazy loading risparmia dati e velocizza la prima visualizzazione per i frame più in basso.
Perché ogni iframe dovrebbe avere un title?
Chi usa uno screen reader si sposta tra i frame tramite i loro titoli. Un titolo chiaro, come "Calendario delle prenotazioni dello studio di Leeds", dice cosa c'è dentro prima di entrarci.
Cosa devo mettere nell'attributo allow?
Solo le funzionalità di cui l'embed ha bisogno, separate da punto e virgola, per esempio allow="fullscreen; picture-in-picture". Elencare una funzionalità senza un'origine la consente per l'origine in src. allow può solo restringere ciò che permette l'header Permissions-Policy della pagina stessa, mai ampliarlo.
L'anteprima invia i miei dati da qualche parte?
Nessun dato arriva a noi. Il codice viene costruito in questa pagina. L'anteprima è un normale iframe nel tuo browser, quindi il sito incorporato riceve una normale visita da parte tua, come quando lo caricano i tuoi visitatori.
Una checklist per ogni embed
Titolo, dimensione, caricamento, permessi, sandbox, referrer: sei decisioni, e il generatore le rende tutte esplicite. I default qui sono quelli sicuri: lazy, responsive, una referrer policy che tra siti diversi invia solo l'origine, e nessun permesso extra oltre a fullscreen.
Dopo aver incollato il codice, provalo alla larghezza di un telefono. Un frame con una larghezza fissa in pixel è la causa più comune di scorrimento laterale su mobile.
Quando l'anteprima resta vuota o rifiuta
Un riquadro di errore grigio significa che il sito incorporato ha inviato un header che vieta il framing. Un frame bianco vuoto spesso significa che il sito ha bisogno di script o form che un token sandbox che hai spuntato sta bloccando: togli la spunta al sandbox e riprova per distinguere i due casi.
Alcuni siti rilevano anche di essere incorporati e mostrano una pagina diversa. Quel comportamento lo decidono loro e non si può cambiare dall'esterno.
Privacy e prestazioni
Ogni iframe è una pagina completa di un altro sito, con i suoi script e magari i suoi cookie. Menziona i contenuti di terze parti incorporati nella tua informativa sulla privacy e preferisci le modalità embed rispettose della privacy quando il provider le offre.
Se un embed è pesante e facoltativo, valuta un segnaposto con caricamento al clic: mostra un'immagine e un pulsante, e inserisci l'iframe solo quando qualcuno lo richiede.
Schemi pronti all'uso
Frame responsive con aspect-ratio
Ridimensiona la finestra e il frame mantiene la sua forma. Qui la pagina interna arriva da srcdoc così l'esempio funziona offline.
Segnaposto con caricamento al clic
Nulla dell'altro sito viene caricato finché non premi il pulsante. Il tag template contiene l'iframe vero.
Crea il tuo iframe
Indirizzo da incorporare (https)
Titolo (descrivi il contenuto)
Dimensione
Responsive
Fissa
Proporzioni
Larghezza (px)
Altezza (px)
Lazy load (loading="lazy")
Metti il contenuto in sandbox
Token sandbox
Permessi (allow)
Referrer policy
Il tuo codice
Copia codice
Carica anteprima
L'anteprima carica l'indirizzo nel tuo browser. Un riquadro di errore grigio significa che quel sito rifiuta di essere incorporato.
Inserisci un indirizzo completo che inizi con https:// o http://.