Cos'è un codice embed? Guida per PDF, flipbook e video

Cos'è un codice di incorporamento?

Un codice di incorporamento è uno snippet HTML che visualizza contenuti esterni — un video, un PDF, un flipbook, una mappa, un tweet — all'interno della tua pagina web. Quando un lettore carica la tua pagina, il browser recupera il contenuto esterno e lo renderizza inline, come se fosse parte del tuo sito.

La tecnologia sottostante più comune è l'elemento HTML <iframe>, che carica una pagina web separata all'interno di un frame rettangolare sulla tua pagina.

La struttura base di un codice di incorporamento

Un tipico codice di incorporamento si presenta così:

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

Ogni codice di incorporamento include quattro elementi:

• src — l'URL del contenuto da incorporare.
• width e height — le dimensioni del frame (in pixel o percentuale).
• Attributi di permesso — allowfullscreen, allow="autoplay" o flag sandbox che permettono al contenuto incorporato di usare determinate funzionalità del browser.
• Stile opzionale — frameborder, attributi style per rifinitura visiva.

Quando un lettore apre la tua pagina, il browser vede il tag <iframe>, richiede l'URL in src e renderizza la pagina restituita all'interno del frame.

Da dove arrivano i codici di incorporamento

Ogni piattaforma che supporta l'incorporamento genera il proprio codice. Lo copi dalla piattaforma e lo incolli nel tuo sito:

• YouTube / Vimeo — pulsante Condividi → Incorpora → copia il codice iframe.
• Google Maps — Condividi → Incorpora una mappa → copia l'iframe.
• Twitter / X — Post → Incorpora questo post → copia.
• FlipLink — ogni pubblicazione genera automaticamente un codice di incorporamento, oppure usa lo strumento gratuito embed-pdf per incorporamenti occasionali senza registrazione.

Ogni piattaforma regola le dimensioni, i permessi e il comportamento di caricamento dell'iframe's in base ai propri contenuti. Raramente serve modificare il codice generato — copia, incolla, fatto.

In cosa un codice di incorporamento differisce da un link?

Un link invia il lettore lontano dalla tua pagina, verso il contenuto esterno. Un codice di incorporamento lo mantiene sulla tua pagina mentre mostra il contenuto esterno inline.

• Link: <a href="...">Guarda il video</a> — clic per lasciare la pagina.
• Incorporamento: <iframe src="..."> — il contenuto appare inline, senza navigazione.

Questa differenza conta per bounce rate, engagement del lettore e analytics. Un incorporamento ti permette di misurare le visualizzazioni senza perdere il visitatore verso un altro dominio.

Incorporare un PDF: quattro approcci

L'incorporamento dei PDF si è evoluto oltre l'iframe di base. I quattro approcci, in ordine di semplicità:

1. Tag <embed> o <object> nativo

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

Funziona nei browser desktop ma in modo incoerente su mobile. I lettori vedono il visualizzatore PDF predefinito del browser, che varia per dispositivo e perde qualsiasi interattività.

2. Iframe Google Docs Viewer

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

Gratuito, funziona su mobile, ma con controllo limitato sull'aspetto del visualizzatore e nessun analytics.

3. Visualizzatore personalizzato basato su PDF.js

Distribuisci la libreria PDF.js di Mozilla's sul tuo sito e incorpora un visualizzatore personalizzato. Controllo completo su branding e comportamento, ma richiede lavoro di sviluppo e manutenzione continua.

4. Iframe di piattaforma flipbook (consigliato per le aziende)

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

Carica il PDF su una piattaforma flipbook, copia il codice di incorporamento generato. Ottieni link cliccabili, animazione di sfoglio pagine, analytics e raccolta lead — senza codice personalizzato, con esperienza mobile coerente. Vedi come incorporare un PDF sul tuo sito web per una guida completa per piattaforma.

Rendere responsive i codici di incorporamento

Il default width="640" height="360" si rompe su mobile. Per incorporamenti responsive, avvolgi l'iframe in un contenitore che preservi il rapporto d'aspetto:

<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>

Il valore padding-bottom imposta il rapporto d'aspetto (141.4% = A4 verticale; 56.25% = video 16:9; 75% = 4:3).

Sicurezza: cosa fa sandbox

Il contenuto incorporato gira nel browser del visitatore's, quindi può eseguire JavaScript, leggere cookie del proprio dominio e perfino navigare la pagina genitore. L'attributo sandbox limita ciò che il contenuto incorporato può fare:

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

Flag comuni:

• allow-scripts — consente l'esecuzione di JavaScript
• allow-forms — consente l'invio di moduli
• allow-same-origin — tratta il contenuto come first-party (necessario per stato di login salvato)
• allow-popups — consente i link target="_blank"

Per gli incorporamenti PDF, il default (senza sandbox) va bene a meno che tu non stia incorporando contenuti non attendibili caricati da utenti.

Errori comuni nei codici di incorporamento

• Larghezza in pixel fissa. Usare width="600" si rompe sugli schermi stretti dei mobile. Usa width="100%" o il wrapper responsive.
• allowfullscreen mancante. Gli utenti non possono espandere a schermo intero i visualizzatori video o flipbook.
• Iframe rimossi dai costruttori di pagine. Alcuni editor CMS (Squarespace Embed Block, WordPress senza il blocco Custom HTML) rimuovono i tag iframe. Incolla sempre i codici di incorporamento in un blocco "Codice" o "Custom HTML".
• Errori cross-origin nella console. Alcuni incorporamenti richiedono header CORS specifici dalla sorgente; se l'incorporamento sembra rotto, controlla la console del browser.
• Anteprima rotta nell'editor della pagina. Molti editor CMS non renderizzano gli iframe in modalità editor — controlla sempre sulla pagina pubblicata, non in anteprima.

Domande frequenti

Un iframe è la stessa cosa di un codice di incorporamento?

Un iframe è un tipo di codice di incorporamento — il più comune. I codici di incorporamento possono anche usare <embed>, <object>, <video> o widget JavaScript specifici della piattaforma. Per PDF e flipbook, gli iframe sono lo standard.

Incorporare un PDF rallenta il mio sito?

L'iframe carica il PDF su richiesta, quindi influenza le prestazioni della pagina solo se l'utente ci scorre sopra. Usa loading="lazy" sull'iframe per rimandare il caricamento finché l'incorporamento non è vicino al viewport.

Posso personalizzare l'aspetto del contenuto incorporato?

Puoi controllare il frame esterno (dimensioni, bordo, posizione) con CSS sull'iframe. L'aspetto del contenuto's interno dipende dalla piattaforma che genera il codice. FlipLink ti permette di applicare colori del brand e stile personalizzato al visualizzatore incorporato.

Il codice di incorporamento funziona su tutti i website builder?

Qualsiasi sito che supporti l'incollaggio di HTML grezzo (WordPress Custom HTML, Wix HTML iframe, Squarespace Code Block, Webflow Embed, Shopify Custom Liquid, Notion /embed) accetta codici di incorporamento iframe. Alcuni builder hanno restrizioni aggiuntive — vedi la nostra guida all'incorporamento per piattaforma per i dettagli.

Come ottengo un codice di incorporamento per il mio PDF?

Usa lo strumento gratuito embed-pdf: carica un PDF, ottieni un codice iframe in pochi secondi. Nessuna registrazione necessaria per incorporamenti occasionali.

Letture correlate

• Come incorporare un PDF su un sito web: 5 metodi a confronto
• Come inserire un PDF in un sito, documento o email
• Come incorporare un flipbook in Squarespace
• Come incorporare un flipbook in Shopify
• Cos'è un PDF interattivo?