CONTATTACI

Blog

Come inserire un video in una pagina web

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:

  1. MP4: video/mp4
  2. WebM: video/webm
  3. 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

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.