Come inserire un video html in WordPress senza usare plugin

In questo articolo ti guiderò passo passo per rendere il tuo sito WordPress o blog ricco di video. Ti darò il codice ed il metodo per inserire un video nel sito senza appesantirlo cosi da mantenere alte le performance della tua pagina. I video potranno essere inseriti nella tua pagina usando tre metodi diversi tra loro ma con una base comune, tutti si inseriscono tramite codice html e senza l’uso di plugin o tecniche di programmazione web troppo difficili.

Prima di tutto, fai un backup del tuo sito web, anche se questa non è un operazione difficile ma anzi molto semplice, sono convinto che la sicurezza dei tuoi dati, i tuoi contenuti ed il tuo lavoro debbano essere messi in sicurezza, per questo o ci si affida al backup dell’hosting oppure ci si mette di d’impegno e si crea un backup WordPress. Se hai già messo in sicurezza il tuo sito passiamo alla pratica. Inseriamo un video html in WordPress.

Come Inserire un video usando il codice HTML in WordPress o in un pagina HTML

Per inserire un video html nella tua pagina web avrai bisogno solo di un editor testuale come il Notepad o Blocconote e conoscere qualche tag Html di base che ti aggiungo qui sotto. Sappiamo che le pagine wordpress si basano sul linguaggio PHP ma in questo tutorial non ne avrai bisogno, perché compierai l’azione attraverso il codice html (testuale). Se hai la tua pagina html bene sei già pronto, oppure creane una. Se stai utilizzando WordPress allora clicca sul simbolo + Nuovo nella barra in alto e poi passa alla modalità testo. Come saprai quando vuoi inserire un contenuto in WordPress hai due opzioni per lavorare la prima è quella a Vista la seconda attraverso il codice html5. Per passare da una modalità all’altra ci sono nell’angolo destro della pagina due link sulla tab Visuale e Testo. Per inserire del codice html in WordPress dobbiamo usare la modalità Testo.

Creare una cartella

Se un CMS allora potrai scegliere se saltare o meno questo passaggio e caricare i tuoi video direttamente dal pannello di controllo di WordPress da dove carichi i file media. Attenzione, io non lo faccio mai perché trattandosi di file pesanti, rischierei di appesantire troppo il mio blog ed il database, per questo, preferisco caricare i file video via ftp attraverso il mio servizio Hosting e poi collegarli usando il codice html.

Puoi scegliere di creare tutto offline e poi spostare i file via ftp oppure lavorare direttamente sul tuo server. Per mantenere un certo ordine, crea una nuova cartella, per chi non lo sapesse basta fare tasto destro del mouse > nuovo > cartella poi se vuoi rinomina la cartella appena creata come desideri (consiglio ad esempio un nome riconoscibile come “video”) per rinominarla fai tasto destro sopra la cartella e clicca su rinomina, oppure seleziona con un clic la tua cartella e premi f2 sulla tastiera per rinominarla.

A questo punto, copia nella cartella, che hai appena creato, tutti i video che desideri pubblicare sul tuo sito. Se la cartella si trova sul tuo device, ricordati di spostarla sul server, cosi che i tuoi video possano essere raggiunti e sempre disponibili a chi volesse vederli. Una volta che la cartella contenente i video è stata pubblicata sul server allora copia l’indirizzo per esteso (url) del tuo video ti servirà per l’inserimento del filmato sulla pagina html.

WordPress html: Se stai utilizzando WordPress devi sapere che questo potente CMS ti da la possibilità di utilizzare diversi modi per inserire html in WordPress. Puoi scegliere di utilizzare Elementor oppure inserire direttamente il codice HTML in pagina. Vediamo come.

Come inserire un video con html nel tuo sito WordPress

Per inserire un video in una pagina web, mediante codice HTML è molto semplice: tutto quello che ti serve sapere a livello di codice è il tag “video”. In questo esempio ti mostro  un modo pratico, veloce e sicuro per inserire file multimediali all’interno di una pagina.

Letture consigliate per chi vuole iniziare

<video src="video-html-wordpress.mp4" width=320  height=240 controls poster="immaginedianteprima.jpg">
 Il video non può essere riprodotto sul tuo browser.<br>
 Fai partire il download del video cliccando <a href="URL">qui</a>. 
 </video>

Nell’esempio sopra riportato il Tag <video width=”xx” height=”xx”> contiene l’indirizzo di dove si trova il video <code>(src=”video-html-wordpress.mp4″)</code> e gli tag width, height, che definiscono le proprietà del video. I comandi base html come width=larghezza e height=altezza li conoscevi già ne sono sicuro, per questo saprai sicuramente usarli. Se vuoi fare come me io nei video spesso uso queste impostazioni height=”100%” e height=”auto”.quindi abbiamo detto che gli attributi width e height specificano le dimensioni del vostro video. Se volete che il video parta subito aggiungete <code>autoplay</code> con il quale ordini al browser di far partire automaticamente il video all’apertura della pagina. ( questo è molto utile se posizionate il video come slider top page).

Inserire video YouTube in WordPress o pagine html

Se vuoi inserire un video YouTube in WordPress, sul tuo post o la tua pagina html, la procedura iniziale è uguale, cambia solo il codice da inserire che questa volta ti fornirà YouTube.

Quindi vediamo come mostrarlo sulla pagina in pochi passaggi di mouse:

Per incorporare un video bisogna innanzi tutto andare sul video di YouTube che vuoi incorporare, poi fare click sul tasto Condividi che solitamente è posto sotto il video a destra e scegliere la voce Incorpora. Si aprirà una finestra, allora, copia il codice HTML che YouTube ti ha appena fornito ed infine incolla il codice copiato nel codice HTML del tuo blog o sito web. Se usi wordpress non dimenticare di incollare nella modalità testo!
Salva e pubblica ed il tuo video è online!

Nei prossimi cinque anni la comunicazione online sarà video per 80%. Questo, lo affermano diverse ricerche e studi. Tu sei pronto a farti trovare attraverso un video su Youtube? Ho scritto una guida gratuita su come fare SEO su YouTube cosi che i tuoi video possano essere trovati e visti da più utenti possibili!

Se ti è piaciuto questo articolo fammelo sapere lasciando un commento qui sotto ed se vuoi aiutarmi condividi questo articolo sul tuo social.

“Un sito è inutile se non puoi trovarlo facilmente” Francesco Monaco