Come inserire un iFrame in una pagina web e incorporare elementi multimediali

Postato in data 18 Giugno 2020 da Riccardo Esposito - Aggiornato il 23 Giugno 2020

Un blog post non è fatto solo di testi e immagini, ci sono altre possibilità. Pensa ai video o magari ai podcast dei colleghi. Potresti anche inserire un documento da consultare e sfogliare. Ecco perché è così importante capire come aggiungere iFrame in una pagina web.

come embeddare iframe

Con questa soluzione puoi inserire facilmente contenuti multimediali e incorporare codice di video. Il tutto rispettando le regole del copyright e personalizzando tutti i parametri.

Ma basta il copia e incolla dell’HTML nell’editor per ottenere risultati? ecco come aggiungere iFrame in una pagina web WordPress con la destrezza e il metodo di un webmaster.

Cos’è un iFrame e a cosa serve

Per capire come inserirlo al meglio bisogna prima conoscerlo. Allora, di cosa stiamo parlando esattamente? L’iFrame è un tag che consente di incorporare un elemento esterno nella pagina web del tuo sito o del blog.

Nello specifico viene definito, dal sito w3schools.com, come “An inline frame is used to embed another document within the current HTML document”. Detto in altre parole, con questa stringa di codice puoi incorporare un elemento esterno valutando una serie di vantaggi. Ecco come appare l’iFrame nel codice:

<iframe src="/default.asp" width="100%" 
height="300" style="border:1px solid black;">
</iframe>

In primo luogo non hai bisogno di caricare nulla sul tuo sito web, non gravi sul server e non hai necessità di upload. Questo è un aspetto particolarmente utile quando devi mostrare un video: meglio usare l’iFrame di Youtube ed evitare il caricamento del file sul tuo hosting.

Poi c’è da aggiungere il copyright: se un servizio mette a disposizione la possibilità di inserire un iFrame sei libero di usarlo, senza permessi o restrizioni. E poi c’è la praticità d’uso.

Un semplice copia e incolla del codice ti consente di avere lettori video, podcast e PDF reader sulle tue pagine web. E puoi personalizzare alcuni parametri come altezza e larghezza.

Da leggere: risolvere messaggio di sito non sicuro sul browser

Come aggiungere un iFrame con il codice

In linea generale, per embeddare un iFrame in una pagina web basta copiare i tag, andare nella sezione HTML dell’editor e incollare. Con WordPress Gutenberg, però, la situazione è cambiata. E le azioni da portare avanti sono diverse. Non più difficili. Ecco cosa fare

Tempo richiesto: 2 minuti.

  1. Vai sulla piattaforma che offre l’iFrame

    Ad esempio su YouTube questa opzione si trova sotto al video, cliccando sul simbolo del codice. Su Spreaker, invece, c’è un tasto specifico con la parola iFrame.

  2. Copia il codice come lo preferisci

    Seleziona ogni elemento del codici e copialo. Puoi aggiungere delle preferenze sulle dimensioni o, come avviene con YouTube, rispetto al minuto di inizio del video.

  3. Aggiungi un modulo HTML personalizzato

    Gutenberg permette di inserire anche una sezione dedicata a questo passaggio. Si chiama HTML personalizzato e consente di inserire qualsiasi tipo di elemento.

  4. Salva e modifica il codice

    Hai incollato? Verifica il risultato. Se il lettore ha dimensioni in adeguate puoi intervenire sui parametri dell’embedded cambiando altezza e larghezza, tag width e height.

Il passaggio può essere fatto con Facebook, Instagram, YouTube, Vimeo e la maggior parte dei servizi. Funziona, chiaramente, se il post in questione non ha privacy restrittiva.

Embedded iFrame con WordPress Gutenberg

Non tutti sanno che con WordPress Gutenberg, in realtà, per embeddare un contenuto extra basta copiare e incollare non per forza l’intero iFrame: basta fare questo con l’URL. Oppure puoi andare nella sezione dedicata ai blocchi di incorporamento e scegliere tra i servizi.

Gli sviluppatori hanno scelto diverse piattaforme, di solito usate dai webmaster per migliorare le pagine web, e hanno creato dei moduli di incorporamento specifici per ogni realtà. Dal semplice feed rss ai risultati di Amazon puoi mettere veramente tutto con questo sistema.

Quali plugin per incorporare il codice iFrame?

Chi lavora ogni giorno con i contenuti multimediali e chiede come aggiungere iFrame in una pagina web WordPress può avere un desiderio: sfruttare i benefit di un plugin pensato per migliorare, velocizzare e ottimizzare le operazioni. A tal proposito il primo consiglio è quello di installare il ben noto iFrame che trovi su wordpress.org/plugins/iframe.

Come aggiungere iframe in una pagina web

Questo tool consente di gestire tutti gli embedded con shortcode personalizzabili. In più aggiungo Litespeed Cache che ha un vantaggio molto interessante: mette in lazy load anche gli iFrame. Risparmiando risorse preziose quando si ottimizzano i tempi di caricamento.

Da leggere: la velocità è tutto per un ecommerce

Tu come aggiungi l’iFrame a una pagina web?

Queste sono le soluzioni per incorporare il codice iFrame nelle tue pagine web. Ricorda che, in ogni caso, c’è un parametro da considerare: l’impegno per caricare elementi multimediali.

Anche se non gravi sul server, avere tanti iFrame può rallentare il caricamento della pagina e questo è un male per le prestazioni, l’user experience e la SEO. Meglio mettere solo ciò che serve anche per quanto riguarda gli iFrame, sei d’accordo? Hai domande in merito?

Clicca per votare questo articolo!
[Voti totali: 1 Media: 5]

Discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *