Il modo corretto di aggiungere un video in WordPress

Aggiornato il

Aggiornamento (febbraio 2014): vuoi imparare a inserire un video di sfondo per il tuo sito? Ho scritto questo semplice un tutorial che ti spiega come realizzarlo in pochi passi.

Dalla versione 2.9 di WordPress, è possibile inserire video nei nostri post in modo ancora più semplice e “pulito”.
Prima, era necessario inserire il classico codice personalizzato estrapolato dal sito che ospitava il video, e che spesso richiedeva la manipolazione manuale di alcuni parametri (ad esempio, il codice di YouTube):


<iframe width="420" height="315" src="https://www.youtube.com/embed/GgDDXXeYJeI" frameborder="0" allowfullscreen></iframe>

Adesso, grazie a una recente funzionalità, basta solo inserire l’URL del video all’interno del post! Questo è possibile perché WordPress sfrutta delle API oEmbed integrate (non sempre si può fare: solo se il video che vogliamo caricare è su un sito che ne supporta la funzionalità).

Come funziona? Una volta pubblicato il post, WordPress prova a controllare il sito in cui il video è ospitato alla ricerca del codice oEmbed. Se lo trova, ci pensa lui a convertire l’URL nell’output corretto.

Questa funzionalità è attivata di default in WordPress, ma può essere disattivata andando in Settings > Media e togliendo la spunta a “When possible, embed the media content… ecc.” (Fig. 1). Aggiornamento: dalla versione 3.5 di WordPress questa opzione non è più presente nel pannello, e tale feature rimane sempre attiva.

auto-embed di WordPress

Fig. 1: WordPress, auto-embed all’interno dei “Settings” (per versioni di WordPress < 3.5)

Come fare

Per inserire un video, basta quindi seguire pochi semplici passi:

  1. Creare un nuovo post
  2. Copiare l’URL del video in questione dal sito che lo contiene
  3. Inserire l’URL all’interno del post
  4. Pubblicare il post

Se all’interno del post oltre al video c’è anche altro contenuto (testo, immagini, ecc.) bisogna fare attenzione ad inserire l’URL utilizzando uno shortcode di tipo [ embed ], in questo modo:

[ embed ]http://www.youtube.com/watch?v=GgDDXXeYJeI[ /embed ]

Rircordati di eliminare gli spazi tra la parola embed e le 2 parentesi quadre [ ].

Siti supportati

Di seguito l’elenco di siti più conosciuti (in Italia) per i quali tale funzionalità è supportata:

Questo elenco non è certamente esaustivo: per conoscerlo nella sua interezza e per includere i video provenienti da altri siti che non sono supportati, consiglio di controllare la documentazione ufficiale di WordPress.

Ti danno fastidio i “video suggeriti” (“related videos”) di YouTube alla fine del tuo filmato? Eliminali!

Il modo più veloce per eliminarli è installare questo plugin: Hide YouTube related videos.

di Mattia Frigeri

COMMENTI

  • io ho WordPress 3.5.1, ma in “media” ho appena due parti che riguardano il caricamento e le dimensione delle immagini. Non mi appare “embed”… è un problema nella mia versione???
    Grazie

    • Ciao Matteo, hai perfettamente ragione: nelle più recenti versioni di WordPress (precisamente dalla 3.5) quella casella non appare più, proprio perché WordPress esegue tale operazione di default. Non è quindi più necessario alcun settaggio nelle impostazioni dei “Media”. Grazie per la precisazione, ho anche aggiornato l’articolo. Se invece sei curioso di conoscere le prossime funzionalità di WordPress 3.6, ti consiglio la lettura di questo articolo. Ciao.

  • Ciao, grazie mille per la dritta.
    Volevo capire nello shortcode embedded, dove posso inserire le dimensioni che deve assumere il video per occupare tutta la larghezza di pagina? Se lo scrivo cosi non mi funziona:

    [embed] iframe width="1120" height="960" ...URL... [/embed]

    Grazie mille, Ciao Susanna

  • Ciao Mattia, davvero interessante il tuo articolo, io però vorrei inserire nella Home, un video youtube che si avvii automaticamente ad una certa risoluzione è possibile??
    Grazie1000
    Max

    • Ciao Max,
      estendere il metodo illustrato in questo tutorial per modificare le dimensioni del video e farlo partire in automatico, diventerebbe molto complesso e richiederebbe una avanzata customizzazione dei file “di sistema” di WordPress. Ti consiglio di utilizzare quindi il “metodo normale”:

      
      <iframe width="480" height="390" src="//www.youtube.com/embed/My2FRPA3Gf8?autoplay=1" frameborder="0" allowfullscreen>
      
      

      In questo caso sfrutti direttamente un oggetto <iframe> per incorporare il video (puoi “copiaincollarlo” direttamente da YouTube), e cambiando i parametri interni legati alle dimensioni (nel mio caso, 480 e 390), puoi variarle. Infine, il parametro ?autoplay=1 (inserito alla fine dell’URL del video, nel parametro src) è quello che permette di far partire il video in automatico.

  • Ciao Mattia anche io vorrei inserire un video come intro al mio blog ma sono una schiappa…non ho capito dove posso inserire iframe …ma il video lo devo caricare per forza su youtube? e se volessi mettere un pulsante tipo salta intro?….aiuto!!!

    • Ciao, innanzitutto non demordere, qui abbiamo iniziato tutti come “schiappe”!
      In secondo luogo… se ho capito bene, vuoi mettere nella homepage del tuo sito un video. Il consiglio è sempre di “ospitare” (caricare) i video su servizi come YouTube, Vimeo o similari, in modo che siano loro e non il tuo hosting a dover gestire la parte tecnica (dimensioni video, codecs, servizio streaming, ecc.). Una volta caricato, è facilissimo inserire il video sul nostro sito con WordPress. Prova a non usare subito oggetto un <iframe>, sfrutta piuttosto il primo metodo, più semplice e spiegato in questo tutorial: vai sulla pagina di YouTube, clicchi sul tasto “condividi” (sotto il video) e copi l’indirizzo URL che ti compare ancora più sotto. Infine, dentro la home del tuo sito, inserisci il codice che hai appena copiato (guarda la sezione “come fare” di questo tutorial). Non ci sarà bisogno di un pulsante “salta intro”, perché il video non partirà senza il click dell’utente.
      Nel caso volessi invece far partire il video in automatico, inserisci il video direttamente come oggetto <iframe> (il codice da copiare è sempre su YouTube, questa volta sotto la tendina “codice da incorporare”). A questo punto copi tutto l’oggetto <iframe> dentro la pagina di WordPress (guarda quello che ho scritto a Max per sapere come far partire il video in automatico!). Anche qui, nessun bisogno del tasto “salta intro”: l’utente avrà a disposizione il classico tasto “pausa”, come in tutti i video.
      Ok, spero di esserti stato d’aiuto!

  • grazie delle preziose informazioni, raramente ho trovato chiarezza, semplicità e precisione in altri siti dove ci sono indicazioni per la gestione di wordpress.
    Non so quasi nulla, il mio webmaster ha da poco finito il mio sito in wordpress ( non ero in grado di fare da sola), mi sto cimentando però nella costruzione di un mio piccolo blog e …. davvero le cose da imparare sono tante e trovo tante difficoltà, non è sempre così semplice e immediato come sembra in tanti tutorial che si trovano in rete.
    Magari gli articoli fossero sempre chiari come il tuo! Grazie ancora!

    • Ciao Silvia, il tuo commento per me vale come gli applausi per un musicista dopo la performance. Ti ringrazio e ti faccio un grosso “in bocca al lupo” per il tuo blog!

  • Ciao Mattia,
    sono in difficoltà con l’inserimento delle immagini nel sito. In pratica succede che il caricamento nella cartella avviene regolarmente. Quindi, scrivo il post, nel momento in cui devo inserire una foto la seleziono, ma appena clicco su INSERISCI NELL’ARTICOLO di fatto non lo inserisce! Sto impazzendo. Uso la versione 3.8.0. Puo darmi una mano? Grazie!

    • Ciao, sei un po’ “off topic”, nel senso che la tua richiesta non ha molto a che fare con l’argomento del tutorial. Ti contatto in privato, magari capisco meglio il problema.

  • Grazie grazie grazie!
    In un nanosecondo sono riuscita a inserire un video di youtube e anche a dimensionarlo correttamente!
    sei un mito!

  • Sei stato chiarissimo. In genere non ho problemi, però alcuni video di yuotube non riesco a caricarli. E nel sito compare l’url del video. Grazie!

  • Ciao, ho la versione 3.8.1 e sono titubante nell’aggiornarlo perchè ho visto problemi su altri blog. Addirittura perso l’intero contenuto (anche se io ho il backup)! grazie

    • La tua versione è aggiornata! A questo punto il problema potrebbe essere del browser che stai usando o qualche problema accidentale legato al video in questione, dubito che il tema di WordPress che hai installato blocchi alcuni video e altri no… In ogni caso, bisognerebbe che un tecnico ci mettesse direttamente mano. Ciao

  • Vista la tua disponibilità e competenza ne approfitto per sottoporti il mio problema. Improvvisamente oggi il video che avevo inserito non è più dimensionato correttamente.
    Nel post ho scritto:
    [embed width="460"]http://www.youtube.com/watch?v=xZ3-jrO_6fo[/embed]

    Ma nel sorgente della pagina compare:

    [p][span class=’embed-youtube’ style=’text-align:center; display: block;’][iframe class=’youtube-player’ type=’text/html’ width=’640′ height=’390′ src=’http://www.youtube.com/embed/
    xZ3-jrO_6fo?version=3&
    rel=1&fs=1&showsearch=
    0&showinfo=1&
    iv_load_policy=1&wmode=
    transparent’ frameborder=’0′][/iframe][/span][/p]

    che è successo? ma soprattutto… come lo risolvo?

    Grazie

        • Avevo letto anche io l’articolo di WPBeginner (sono sicuro che l’hai letto anche tu) che tenta di risolvere lo stesso problema. Avevo anche aggiornato questo articolo, dopo la lettura! Pare anche che come dici tu, settare la larghezza all’interno delle parentesi quadre non sia più sufficiente!

          Per risponderti, se il tuo tema (che ho controllato al volo) mantiene costante la larghezza del contenuto ovunque tu carichi i video, direi che hai trovato la soluzione giusta! Potrebbe essere un problema, credo, nel caso tu avessi anche pagine più grandi (in larghezza).

  • Ciao Mattia, grazie per questo articolo chiarissimo e utile!
    Secondo te, se non si vuole caricare video su piattaforma dedicate come Youtube e Vimeo ma sul proprio hosting, si possono incontrare problemi?
    Parlo di hosting su Aruba o Dreamhost, per esempio.
    Ti ringrazio per le tue indicazioni!

    • Ciao Serena, direi proprio di sì: problemi e svantaggi. Problemi: la tua soluzione hosting potrebbe avere poco spazio per permettersi di ospitare un video, che si sa, è più pesante dei normali files. Altro problema: dovresti controllare tu che il video risulti visibile su tutti i browsers nei vari formati richiesti, occupandoti anche della corretta implementazione del codice HTML. Uno svantaggio che a mio avviso è anche maggiore, è che perderesti la visibilità che un canale come YouTube o Vimeo ti offrono, dove i video sono già ben organizzati, indicizzati e, se accortamente inseriti, “pubblicizzati” in modo automatico.

  • Ciao Mattia, inanzi tutto volevo ringraziarti per il tutorial con il quale sono riuscito facilmente ad inserire il video nel mio sito.
    Volevo solo farti una domanda. Ho visto che anche nel tuo video di Ironman quando termina, la schermata rimane con i video proposti da youtube e per rivedere il video bisogna cliccare sul “reload”. Non c’è modo che il video una volta terminato sia pronto immediatamente per essere rivisto?
    Grazie mille.
    Patrizio.

    • Ciao Patrizio, ti riferisci sicuramente ai “video suggeriti”. Toglierli è molto semplice: quando incorpori il video, e quindi ti trovi ancora su YouTube, sotto il codice da copiare troverai già spuntata l’opzione “Mostra i video suggeriti quando termina il video”. Ti basterà togliere tale spunta, e copiare il nuovo codice.

      • Ciao Mattia, grazie mille per la risposta, ma purtroppo non sono riuscito. Ho trovato il codice che mi segnalavi, ma è diverso rispetto a quello che ho inserito io.

        • Ciao Patrizio, prova con questo codice tra gli [embed]:

          
          http://www.youtube.com/embed/U3UzqWBDKHc?rel=0
          
          

          Sostanzialmente, ho aggiunto in fondo all’url la stringa ?rel=0, che se guardi è ciò che cambia lui in automatico una volta tolta la spunta. Fammi sapere!

  • Ciao Mattia, sono da poco approdato su WordPress con un blog dedicato al cinema. Ho riscontrato un piccolo problema però: dedicandomi a recensioni di film capita di dover inserire all’inizio del post il poster del film e a fondo pagina il trailer (youtube). Per quanto riguarda Facebook, funziona perfettamente e nell’immagine di anteprima ritrovo il poster. Nell’immagine di anteprima sulla home del blog stesso idem, tutto perfetto. Mentre quando sono in modalità lettore e scorro gli articoli miei e quelli degli iscritti, lì al posto del poster viene visualizzato il trailer (playable tra l’altro). Volevo sapere come far apparire l’immagine anche li come negli altri casi. Grazie mille in anticipo e complimenti per tutto!

    • Ciao Denis. Ho guardato il tuo blog, complimenti per la scelta del tema perché è davvero molto carino, ricorda molto il mitico Medium. Non credo di aver capito però quale sia l’errore. Ad esempio, sto osservando la pagina della recensione di “Lucy” (il film in cui recita la donna della mia vita), e mi sembra tutto “regolare”: poster in alto, trailer a fondo pagina. Anche nella home, tutto ok: nessun trailer “playabile”, solo anteprime.