Di Riccardo Esposito | Pubblicato il - Aggiornato il
Per inserire un video in HTML devi avere il codice da embeddare. Poi lo selezioni, lo copi e lo incolli nella sorgente del codice regolando le dimensioni. Oppure usi un widget per ospitare la stringa in modo da posizionare il video dove serve.
Se vuoi mettere un video nella pagine HTML non devi fare altro che utilizzare il codice fornito dal servizio che ospita il contenuto multimediale. Infatti, ormai è tramontata l’idea di caricare il file sul server e utilizzare un lettore proprietario, tipo quello di WordPress.
Questo è impegnativo per l’hosting. Inoltre, l’operazione per aggiungere video su pagine HTML è più facile se hai già il video ospitato su un servizio come Vimeo o YouTube. Come embeddare un video con l’HTML? La risposta è semplice, continua a leggere.
Indice dei contenuti
Perché è utile inserire video HTML?
Prima di capire come farlo è giusto spiegare perché. Aggiungere dei contenuti video nelle pagine, nei post del blog o nelle landing page aiuta il pubblico a ottenere le informazioni giuste in poco tempo. Oggi il tuo target è abituato a utilizzare il canale video.
Puoi ridurre incredibilmente i tempi di fruizione della pagina e migliorare l’user experience inserendo video in pagine HTML. Senza dimenticare che tutto questo ha anche dei vantaggi in termini SEO dato che la presenza di contenuti video può aiutare a posizionarsi in determinate serp. Basta dare uno sguardo ai risultati di Google.
Quindi, in alcuni casi inserire video HTML aiuta a creare contenuti di qualità superiore agli occhi degli utenti. Ma puoi anche avere dei vantaggi per il posizionamento Google.
Hai già creato il tuo prodotto multimediale, come procedere con l’inserimento sulle pagine internet e inserire un video su un blog o un sito web statico in HTML.
Da leggere: come ruotare i video
Come inserire video in HTML5
L’embedded di YouTube o di qualsiasi altra piattaforma può sembrare la soluzione più immediata per inserire un video su una pagina internet. Però puoi mettere video anche con l’HTML5 grazie al tag specifico. Ecco un esempio utile di codice per avere un’idea.
<video src="esempio.mp4" width=700 height=400 poster="anteprima.jpg">
Il video non può essere riprodotto sul tuo browser.
</video>Inserendo il video in HTML5 hai un tag principale che si apre e chiude più una serie di attributi che possono essere utilizzati per modificare e ottimizzare il player.
Ad esempio hai la possibilità di indicare la fonte dell’anteprima con il tag poster. Width e height regolano le dimensioni ed è possibile attivare il contenuto in loop con l’autoplay, disattivando anche il control dei comandi in modo da non poter stoppare il video.
<video loop autoplay src="esempio.mp4" width=700 height=400 poster="anteprima.jpg">
Il video non può essere riprodotto sul tuo browser.
</video>In questo caso abbiamo suggerito l’autoplay in loop. Utilizzando gli attributi loop control ci sarebbe stata la possibilità per l’utente di modificare in ogni momento l’andamento del video. Ricorda che è possibile inserire video anche con diversi tipi di file.
<video controls>
<source src="esempio.mp4" type="video/mp4">
<source src="esempio.webm" type="video/webm">
<p>Il tuo browser non supporta questo video ma <a href="esempio.mp4">lo puoi scaricare qui</a>.</p>
</video>Questo è utile per fare in modo che tutti i browser possano trovare il file compatibile. In ogni caso con l’inserimento video in HTML5 aggiungi anche una stringa di testo, con link di download, che appare nel momento in cui ci siano problemi di visualizzazione.
Embeddare codice HTML da Youtube
Ti ho spiegato come mettere un contenuto multimediale in una pagina web con l’HTML5. Però nessuno può negare che la soluzione più comoda è l’embedded.
In particolar modo quello di YouTube, piattaforma che preferisco rispetto alle altre e anche ben vista da Google. Come inserire un video in una pagina web?
Carica (o trova) il video su YouTube
Il primo passo per caricare un video su una pagina web, un articolo del blog o una landing page, è individuare il video su una piattaforma di condivisione. Il contenuto deve essere tuo o di un altro utente ma comunque è necessario che sia pubblico.
Uso spesso i video di YouTube, praticamente un archivio per qualsiasi tipo di risorsa. Inoltre fornisce un codice embed perfetto per essere copiato e incollato nell’HTML della pagina. Google riconosce al volo questo embedded che può essere personalizzato.
Infatti se decidi di inserire video HTML con YouTube puoi cambiare le dimensioni del player, iniziare da un minuto specifico, togliere i video controller e sfruttare i vantaggi SEO per il posizionamento Google. Basta usare il codice html per inserire video YouTube.
Copia il codice HTML del tuo video
Una volta individuato il video devi trovare e copiare la stringa che ti servirà per inserire anche video MP4 su una pagina internet. L’importante è avere il contenuto multimediale su una piattaforma come YouTube, Dailymotion o Vimeo. Poi trovi l’embed.
Di solito si trova nelle icone della condivisione, vicino ai simboli e alle icone social per la condivisione. Apri la finestra contenente il codice embed del video in HTML, seleziona tutto, fai copia con i tasti o il mouse e vai sulla risorsa nella quale inserire il video.
Ricorda che su YouTube puoi ottenere il codice di embedded anche di raccolte e playlist. In questo modo è possibile caricare un video su un sito web con un lettore che comprende anche altri contenuti. E che possono essere sfogliati sulla stessa pagina.
Incolla lo snippet nella pagina web
Una volta copiato il codice embed puoi inserire il video HTML incollando il tutto nell’editor, proprio dove vuoi che appaia. Questo può essere fatto su una pagina web o in un widget se ad esempio vuoi inserire la clip in una sidebar o nel footer del sito web.
Un metodo alternativo per inserire un video YouTube in una pagina HTML: copia e incolla l’URL del contenuto nell’area in cui vuoi che appaia il player. Su diversi CMS, tipo WordPress, basta questo per mettere un video in un sito internet velocemente.
Ottimizza il player video di YouTube
Puoi modificare le dimensioni del player intervenendo sul codice HTML, cambiando i dati in pixel di width e height, rispettivamente larghezza e altezza della finestra di visualizzazione. Inoltre puoi centrare il lettore video aggiungendo <div align="center"> che ovviamente deve essere chiuso alla fine con </div>.
Se hai la necessità di avere un video YouTube largo quanto la pagina puoi . Vuoi che il video incorporato venga riprodotto automaticamente? Devi aggiungere il tag &autoplay=1 al codice di incorporamento del video subito dopo l’ID.
Come mettere un video HTML su WordPress
Se vuoi inserire un video su una pagina, un articolo o un’area di un sito web creato con WordPress puoi usare anche i blocchi Gutenberg. Questo editor, infatti, ha un elemento specifico per embeddare video incollando solo e semplicemente l’URL (immagine in alto).
In realtà puoi utilizzare anche il blocco HTML personalizzato copiando e incollando l’iframe di YouTube: questa soluzione ti dà la possibilità di utilizzare i vari tag e personalizzare sia la posizione che la dimensione del lettore. Ma non è l’unica soluzione.
Puoi anche caricare un video sul server e utilizzare il lettore nativo di WordPress. Tutto questo senza dimenticare i diversi plugin per inserire video su WordPress come YouTube Gallery, The Ultimate Video Player For WordPress, HTML5 Video Player – MP4 player.
Un altro plugin WordPress molto utile per il tuo lavoro è Yoast SEO video che ti consente di ottimizzare una serie di punti, compresa la creazione di una sitemap.xml specifica.
Risolvi problemi di indicizzazione video
A prescindere dal modo in cui decidi di caricare e inserire video HTML, puoi avere dei problemi con Google. Così come devi indicizzare un blog o un sito WordPress, allo stesso modo hai bisogno di risolvere problemi di riconoscimento di questi contenuti.
Infatti, per qualche motivo Google potrebbe non vedere il video e ignorare il tuo sforzo per pubblicare tutorial e contenuti di qualità. Fortunatamente la Search Console offre uno strumento per la verifica e la correzione dei principali problemi di indicizzazione.
Attraverso il report generato puoi individuare tutte le pagine web indicizzate con un video e quelle che hanno problemi. Non è detto che Google indicizzi tutte le pagine web e lo stesso vale con i video. Però, analizzando i risultati puoi scoprire le cause del blocco e intervenire. In questo modo puoi ottenere i benefici per l’ottimizzazione SEO WordPress.
Categoria: Guide per webmaster
Salve perche con il codice da lei suggerito il video non può essere riprodotto sul tuo browser?
se metto il video nella pagina home non parte.
se poi vado su un’altra pagina e torno su Home parte.
Cosa sbaglio ?
Ciao, difficile capire così, con una semplice descrizione, il motivo del problema. A volte l’inserimento del video in una pagina web dipende da funzioni e caratteristiche del layout del sito.
Devi aggiungere il tag &autoplay=1 al codice di incorporamento del video subito dopo l’ID.
Dove trovo ID nel codice di incorporamento?