Come inserire video in WordPress

Pubblicato: 2020-11-27

La creazione di contenuti interessanti e coinvolgenti è la chiave per coinvolgere i tuoi visitatori e voler sapere di più su di te e sui tuoi prodotti. In precedenza, ho già menzionato alcuni trucchi per creare pagine che ti fanno innamorare e ho menzionato esplicitamente l'importanza di includere elementi visivi.

Infatti, lo scorso anno, uno studio di Zenith prevedeva che nel 2021 ci sarebbe stato un aumento delle visualizzazioni video fino a 100 minuti al giorno e un aumento della spesa pubblicitaria video del 35%. Secondo Cisco, entro il 2022 l'80% di tutto il traffico Internet sarà in formato video. E temo che tutte queste previsioni non siano all'altezza dell'attuale pandemia.

Visualizzazione video online globale
Visualizzazione globale di video online e previsione pubblicitaria per il 2021.

Quindi, senza ulteriori indugi sull'importanza di aggiungere video ai post e alle pagine del tuo sito Web, vediamo quanto è facile aggiungere video in WordPress e quali nuove funzionalità offre l'ultima versione di Gutenberg 9.2.2.

Copia l'URL di un video

Siamo fortunati che l'editor di WordPress ti permetta di incorporare un video da qualsiasi piattaforma molto facilmente. Nel browser, dalla piattaforma in cui si trova il video, puoi copiarne direttamente l'URL.

Screenshot di come selezionare l'URL di un video di YouTube
Seleziona e copia l'URL del video che desideri incorporare.

Puoi anche copiare l'URL cliccando sul pulsante Condividi che trovi per condividere il video e con il quale puoi aggiungere ulteriori opzioni, come ad esempio indicare l'ora di inizio del video.

Condividi il video di YouTube
Condividi il video di YouTube indicando di iniziare al minuto 1.

Quindi non ti resta che incollarlo direttamente in un blocco di testo oppure hai anche la possibilità di selezionare preventivamente il blocco del tipo di video che intendi inserire. Quindi, ad esempio, se voglio incorporare il video WordCamp US 2019 – State of the Word da YouTube a partire dal momento in cui appare Matt Mullenweg, creerò un nuovo blocco YouTube e inserirò l'URL https://youtu.be/gS6_xOABTWo?t=2085 (o in alternativa l'url https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ).

Incorpora un video di YouTube.
Incorpora un video di YouTube.

Si noti che l'ora deve essere indicata in secondi. Inoltre, hai anche la possibilità di allineare il video come desideri nella tua pagina.

Allinea il video del blocco tipo YouTube.
Allinea il blocco del tipo di video di YouTube.

E ottieni un nuovo video incorporato nel tuo post:

Ma non solo, quando aggiungi un blocco YouTube (o un altro tipo di video) hai anche altre opzioni che puoi aggiungere alla visualizzazione del video e che dipendono dalla piattaforma su cui viene riprodotto.

Quindi, ad esempio, nel caso di YouTube, le opzioni disponibili (tramite parametri aggiuntivi nell'URL) che hai sono:

  • Per incorporare il video con larghezza e altezza predefinite adattate al tema: https://www.youtube.com/gS6_xOABTWo
  • Per specificare esplicitamente larghezza e altezza: https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
  • Per specificare solo la larghezza: https://www.youtube.com/watch?v=gS6_xOABTWo&w=320
  • Per allineare il lettore a sinistra: https://www.youtube.com/watch?v=gS6_xOABTWo&align=left
  • Per allineare il lettore a destra: https://www.youtube.com/watch?v=gS6_xOABTWo&align=right
  • Per mostrare solo i video correlati dello stesso canale dopo aver terminato il video: https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
  • Per specificare un'ora di inizio e di fine per un video, aggiungi l'ora di inizio e di fine: https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

Carica e visualizza il tuo video nel tuo WordPress

A volte può capitare che tu non voglia caricare i tuoi video su piattaforme di terze parti e desideri averli esclusivamente sul tuo server WordPress. Caricare un video nella tua libreria multimediale e aggiungerlo è facile come caricare qualsiasi altra immagine. Fai clic su Media o aggiungi un blocco di tipo Video:

Blocco tipo video.
Blocco tipo video.

Proprio come quando aggiungi un'immagine, hai la possibilità di caricare direttamente il video, selezionarlo dalla libreria multimediale o inserirne l'URL.

Schreenshot di come aggiungere un blocco video nell'editor di blocchi
Aggiungi video dall'editor di blocchi.

Quindi, nella libreria multimediale, non ci resta che selezionare il video che vogliamo inserire e lo avremo a disposizione sulla nostra pagina o post.

Screenshot dei file video disponibili nella libreria multimediale di WordPress
Tutti i video disponibili per l'incorporamento verranno visualizzati nella libreria multimediale.

E una volta selezionato, lo avremo a disposizione di tutti i nostri visitatori.

Inoltre, la nuova versione di Gutenberg 9.2.2. aggiunge nuove funzionalità all'inserimento video. In particolare permette di aggiungere elementi HTML di tipo <track> dal menu di modifica.

Sicuramente avrai notato che se hai scaricato un video, la cartella che lo contiene include anche un file SRT . Si tratta di file di sottotitoli che non sono inclusi nel video ma che il video player è in grado di estrarre e visualizzare in sincronia con il video che stai guardando. Quindi un elemento track serve per indicare la posizione e alcune funzionalità aggiuntive di questi file SRT .

Quando si inserisce un video, l'HTML generato è simile a:

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

Con questa nuova versione di Gutenberg, ora puoi aggiungere elementi di traccia ai video dal menu di modifica senza alcuna modifica HTML. Quindi, ad esempio, potresti aggiungere sottotitoli in inglese a un video e il codice HTML includerebbe una traccia con le informazioni sui sottotitoli.

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

Gli attributi che possono essere indicati sulle tracce sono i seguenti:

  • srclang – Lingua dei dati di testo della traccia. Deve essere un codice tag di lingua BCP 47 valido.
  • label – Titolo per l'interfaccia del giocatore.
  • tipo – Come viene utilizzato il testo della traccia. Può avere le seguenti parole chiave:
    • sottotitoli
      • Sottotitoli per traduzioni dei contenuti video (es. sottotitoli in spagnolo quando il video è in inglese) pensati per persone che non capiscono una lingua.
    • didascalie
      • Trascrizione di quanto si sente nel video (dialogo e altri suoni) destinato a persone con problemi di udito.
    • descrizioni
      • Descrizione testuale del contenuto video destinato a persone non vedenti o che non possono visualizzare il video.
    • capitoli
      • I titoli dei capitoli devono essere utilizzati quando l'utente naviga attraverso le risorse multimediali.
    • metadati
      • Tracce utilizzate dagli script. Non visibile agli utenti.
  • src – URL del file di testo.

Come aggiungiamo queste tracce? Molto semplice, dopo aver aggiunto un blocco di tipo video e selezionato il video che vogliamo mostrare, appare una nuova opzione nel menu di editing video, che è Aggiungi traccia s con le opzioni di Apri libreria multimediale o Carica .

Carica o seleziona dalla libreria multimediale il file che contiene il testo della traccia.
Carica o seleziona dalla libreria multimediale il file che contiene il testo della traccia.

Dopo aver caricato il file nella libreria multimediale, sei pronto per selezionarlo.

Screenshot di come selezionare dalla mediateca di WordPress la traccia contenente il testo da sincronizzare con il video
Selezionare dalla mediateca la traccia contenente il testo da sincronizzare con il video.

Vedrai come appare già nel menu di editing video che puoi modificare gli attributi della traccia:

Modifica le proprietà della traccia.
Dopo aver selezionato il file è ora possibile modificare le proprietà della traccia.

Fare clic sul pulsante Modifica e modificare gli attributi in modo appropriato. Ora avrai la traccia di testo inclusa nel tuo video sincronizzata con la visualizzazione del video.

Screenshot di come modificare gli attributi della traccia di un video in Gutenberg
Modifica gli attributi della traccia in base alle tue esigenze.

Pertanto, non solo puoi avere i tuoi video nella tua libreria multimediale, ma puoi anche includere facilmente informazioni aggiuntive su di essi.

Hai già visto che includere i video che hai ospitato su piattaforme di terze parti è molto semplice semplicemente copiando l'URL di dove si trova il video. Ma se, per qualsiasi motivo, preferisci avere i tuoi video ospitati nella tua installazione di WordPress, con questa ultima versione di Gutenberg puoi ora mostrare i tuoi video in modo comodo.

Foto di CardMapr su Unsplash .