Come inserire un video in una pagina web

Come inserire un video in una pagina web

Vincenzo Pistoia Di Vincenzo Pistoia


sito web cms codici video

Stiamo realizzando un sito web per un nostro cliente o per un progetto personale ed abbiamo bisogno di inserire un video in una sezione dedicata. Come facciamo? E soprattutto, lo sapevi che l'utente medio trascorre più del doppio del tempo in più su un sito web se dispone di video? 

Che stiate usando un CMS (come Wordpress) oppure creando il vostro sito web in linguaggio puro sarà possibile ottenere lo stesso risultato, inserendo un codice embed.

Andiamo più nel dettaglio!

Che cos'è un codice embed?

Un codice embed è un frammento di codice HTML e di incorporamento per leggere un contenuto multimediale, un video per esempio. Questo codice quindi non è legato ad un video ma ad un lettore ed estrae il video dalla fonte originale, consentendo di visualizzarlo senza dover ospitare effettivamente il file sul tuo sito web. Questo è un grande vantaggio perché consente tempi di caricamento più rapidi sul sito web.

Andiamo sul codice!

Come funziona in HTML 5?

Analizziamo il seguente esempio:

<!DOCTYPE html>

<html>

  <head>

    <title>Titolo documento</title>

  </head>

  <body>

    <video width="520" height="340" controls>

      <source src=”http://www.miovideo.it” type=video/mp4>

    </video>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

  </body>

</html>

L'elemento HTML5 <video> è il tag principale che specifica un modo standard per incorporare un video in una pagina web. Gli attributi "width" e "height" specificano le dimensioni del video (grandezza e altezza) e quest’ultimo viene identificato aggiungendo un URL all'attributo "src" del tag "<source>" , dunque è possibile utilizzarlo per incorporare video importati dal computer o ospitati da un sito web esterno.

Ricapitolando possiamo identificare i seguenti attributi:

  • src: definisce l'URL in cui è ospitato il contenuto video
  • type: definisce il formato del file,
  • controls: deve essere specificato altrimenti non apparirà alcun elemento visivo per controllare la riproduzione del contenuto.

Inoltre, ci sono diversi attributi facoltativi che possono essere utilizzati per influenzare il modo in cui vengono caricati i contenuti video. Tra i più importanti ricordiamo: 

  • autoplay: che specifica che il video inizierà a essere riprodotto al caricamento della pagina web;
  • loop: che specifica che il video ricomincerà da capo ogni volta che sarà terminato;
  • poster: che seleziona un'immagine da visualizzare come poster del video fino all'inizio della riproduzione;
  • preload: che indica come il video debba essere caricato quando viene caricata la pagina. 

(NB: questo attributo si annulla con la presenza di "autoplay").

Attualmente, il tag HTML5 <video> supporta 3 tipi di file video con i seguenti MIME-type:

  1. MP4: video/mp4
  2. WebM: video/webm
  3. Ogg: video/ogg

Se volessi inserire un video di YouTube?

In realtà è un gioco da ragazzi, infatti basta andare in un video qualsiasi, cliccare su “Condividi” e poi “Incorpora video”. 

Guardiamo il seguente esempio: 

<!DOCTYPE html>

 <html> 

   <head> 

 <title>Titolo documento</title> 

</head> 

<body> 

<iframe width="500" height="320" src="https://www.youtube.com/embed/dkfhSd7u"> </iframe> 

</body> 

</html> 

Un iframe consente di caricare la fonte di un altro URL nella nostra pagina web. Nell’esempio corrente, in poche parole l’iframe non sta riproducendo il video, sta solo caricando un URL che contiene il codice che sta riproducendo il video. In un <iframe> inoltre non sarà possibile inserire gli attributi del tag <video> (come il loop per poterlo ripetere o controls).

Come inserire un video in Wordpress?

Se hai un blog o un sito web su Wordpress, ci sono diversi modi per incorporare un video. Ci addentreremo nelle diverse opzioni, iniziando dalla più semplice.

Come prima opzione basta entrare nella sezione "Media" di Wordpress e caricare il video di riferimento; una volta fatto sarà possibile inserirlo grazie all'editor di testo che Wordpress mette a disposizione per la creazione di contenuti (articoli ad esempio). 

Come seconda opzione possiamo inserire direttamente il codice HTML ( <video>.. </video> ) all'interno del nostro editor facendo però attenzione a cambiare la modalità di inserimento, andando dunque su “Impostazioni”, cliccando su “Modifica come HTML”.

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo