IT
Base di conoscenza 3 min di lettura

Cos’è un iframe?

In breve

Un elemento HTML che incorpora un'altra pagina web, come un player YouTube, all'interno della pagina corrente.

Un iframe (inline frame) è un elemento HTML standard, <iframe>, che carica un documento web separato all’interno di un’area rettangolare della pagina corrente. Il player video di YouTube viene fornito in questo modo: la pagina circostante resta la tua, mentre l’area incorniciata esegue il codice del player di YouTube.

Perché YouTube usa un iframe

Poiché il player viene eseguito nel proprio frame, è isolato dal resto della pagina per motivi di sicurezza, riceve aggiornamenti automatici da YouTube senza che il sito che lo incorpora debba cambiare nulla, e può passare dal dominio standard youtube.com a quello rispettoso della privacy youtube-nocookie.com semplicemente cambiando l’URL di origine.

Attributi iframe comuni per le incorporazioni video

I più rilevanti sono src (l’URL di incorporamento e i suoi parametri), title (per gli screen reader), allow (quali permessi riceve il frame, come autoplay o schermo intero), allowfullscreen, e loading=”lazy” per le prestazioni.

Come un iframe si inserisce nel resto di una pagina web

Una pagina web è normalmente un documento HTML continuo, ma un iframe crea un confine: tutto ciò che si trova al suo interno è un documento separato, con script, stili e contesto di navigazione propri, renderizzato all’interno di un riquadro che posizioni con normale CSS. Questo isolamento è tanto una caratteristica di sicurezza quanto una peculiarità tecnica. Una pagina che incorpora un iframe YouTube non può leggere o modificare direttamente ciò che accade all’interno del player YouTube, e il player non può leggere o modificare direttamente il resto della tua pagina, oltre a quanto ciascuna parte consente esplicitamente tramite le API del browser.

Un esempio pratico

La differenza tra un iframe e un semplice link a una pagina diventa immediatamente visibile confrontando i due fianco a fianco. Un link, <a href="https://youtube.com/watch?v=ID">Guarda su YouTube</a>, porta il visitatore completamente fuori dalla tua pagina. Un iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, mantiene il visitatore sulla tua pagina mostrando il player di YouTube all’interno di un’area definita. L’attributo src svolge funzioni molto diverse in ciascun caso: destinazione di navigazione contro sorgente di un documento incorporato.

Iframe contro altre tecniche di incorporamento

Gli iframe non sono l’unico modo per portare contenuti esterni, ma sono l’approccio standard per un’applicazione di terze parti pienamente interattiva come un player video. Alternative come incorporare un’immagine statica o una card di anteprima di un link mostrano molto meno: non offrono controlli di riproduzione, non possono trasmettere dati video e non rispondono all’interazione dell’utente come fa un player basato su iframe. Per qualsiasi cosa richieda una reale interattività da un’altra origine, player video, mappe, widget di pagamento, un iframe (o le API più specializzate costruite sopra di esso) resta generalmente l’unica opzione pratica. Vedi codice di incorporamento per capire come un iframe viene inserito nell’HTML che effettivamente incolli in una pagina.

Domande frequenti

Cos’è un iframe in parole semplici?

Un iframe è un elemento HTML che carica una pagina web separata, come il player video di YouTube, all’interno di un’area rettangolare della pagina corrente.

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

Un codice di incorporamento è l’intero frammento HTML; l’iframe è il tag specifico al suo interno che esegue effettivamente l’incorporazione.