Immagina di craere un sito web da zero per un cliente o per un progetto personale e di aver bisogno di inserire un video in una sezione dedicata. Come fare? E soprattutto, sapevi che l'utente medio trascorre più del doppio del tempo in più su un sito web se dispone di video?
Che tu stia usando un CMS (come WordPress) oppure creando il tuo sito web in linguaggio di programmazione 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, ad esempio, appunto, un video. 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:
- MP4: video/mp4
- WebM: video/webm
- Ogg: video/ogg
E 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! Vediamone due esempi!
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”.
Queste sono delle modalità per inserire un video nel tuo sito web, ma magari ti abbiamo incuriosito e vuoi saperne di più sul linguaggio html. Non perderti, a tal proposito, la nostra guida all'html e css online!
