manuale seo gardening su amazon

Come inserire un video responsive di YouTube su WordPress

video-responsive-YouTube-su-Wordpress
libro webmaster con wordpress

Per inserire un video di YouTube su WordPress, sapete che basta copiare il codice d’incorporamento del video stesso e incollarlo nell’editor di WordPress in modalità testo. Questa sola operazione però farà si che il video incorporato, non si vada ad adattare al layout del sito. In parole povere non sarà responsive e sui dispositivi mobili rischiamo di vederlo visualizzato tagliato di lato. Vediamo come risolvere e rendere responsive i video youtube su WordPress. La guida è applicabile a qualsiasi sistema di costruzione siti web.

Incorporare un video YouTube su WordPress

Per incorporare un video YouTube su WordPress basta andare sulla piattaforma (https://www.youtube.com/), scegliere il video che si vuole incorporare sul sito e copiare il codice di incorporamento.

Come copiare il codice di incorporamento dei video YouTube

Ecco come si copia il codice di incorporamento dei video YouTube. Tasto destro sul video stesso e click sulla voce “Copia codice per l’incorporamento”.

come prelevare il codice di incorporamento video youtube

come prelevare il codice di incorporamento video youtube

Il codice si presenterà in questa maniera:

<iframe width=”854″ height=”480″ src=”https://www.youtube.com/embed/AAo5eQWt_GQ” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Non vi apparirà nessun codice durante l’operazione ma, cliccando su “copia codice per l’incorporamento“, tale codice sarà già stato copiato nella vostra clipboard. A questo punto, aprite l’editor WP in modalità testo e incollatecelo sopra. Poi salvate.

Già da subito, vi renderete conto che lo spazio occupato dal video è un po’ troppo invadente. Se addirittura provate a vedere la pagina contenente il video da smartphone, scoprirete che il video non si adatta alla larghezza del display del telefono.

Dobbiamo quindi renderlo responsive, ovvero perfettamente visualizzabile da tutti i tipi di dispositivi.

Rendere responsive un video YouTube su WordPress

La prima cosa che si potrebbe pensare di fare, è andare a toccare le dimensioni del video, riducendole per adattarle alle dimensioni dei display dei telefonini. Se ci fate caso infatti, nel codice abbiamo gli elementi width=”854″ ed height=”480″. Queste misure si riferiscono alla larghezza e all’altezza del video, espresse in pixel. Ma toccare questi valori non farà altro che dare un risultato ibrido, che visualizzerà correttamente il video sui dispositivi mobili e “piccoli piccoli” sul sito desktop.

Per far si che il vostro video YouTube sia visualizzato correttamente (responsive) su ogni tipo di dispositivo invece dovrete lavorare un poco di codice. Nulla di difficile. Seguite il tutorial.

Create un “div” apposito da inserire (con l’editor WP in modalità testo) prima dell’iframe di youtube in questa maniera:

<div class=”video-youtube”> QUI IL CODICE IFRAME DEL VIDEO YOUTUBE </div>

Eliminate i valori height e width dalla url contenuta nel vostro iframe.

Portatevi poi sul css del vostro tema e copiateci queste istruzioni. Potete andare sul foglio di stile oppure dalla bacheca di Worpdress, su Aspetto —> Personalizza —> CSS Aggiuntivo. Incollateci sopra queste due porzioni di css (prese dal sito techyou.it a cui vanno i miei ringraziamenti per la aver reso disponibile la risorsa).

.video-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Ed ecco il risultato:

 

Fine

Prima di lasciarvi però vi regalo un piccola chicca. Avete visto che quando finite di vedere un video Youtube, poi si visualizzano i video correlati? Brutto vero? Possiamo eliminare questa funzione.

Come NON far visualizzare i video correlati alla fine del video YouTube

Per non visualizzare i video correlati alla fine del video YouTube basterà aggiungere, alla fine dell’url del video , il parametro ?rel=0 (rel=zero).

Sempre andando ad esaminare il codice del video di questa pagina dovremo fare così:

<iframe src=”https://www.youtube.com/embed/AAo5eQWt_GQ?rel=0” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Il video che vedete in questo post, è una recensione della sigaretta elettronica pico squeeze ( e siccome sono un vapers che usa la squeeze e seguo molto questo personaggio, mi faceva piacere utilizzare il suo video per il tutorial di come inserire un video di YouTube responsive su Worpdress.

Riassunto
Come inserire un video responsive di YouTube su WordPress
Titolo
Come inserire un video responsive di YouTube su WordPress
Descrizione
Per inserire un video di YouTube su WordPress, sapete che basta copiare il codice d'incorporamento del video stesso e incollarlo nell'editor di WordPress in modalità testo. Questa sola operazione però farà si che il video incorporato, non si vada ad adattare al layout del sito. In parole povere non sarà responsive e sui dispositivi mobili rischiamo di vederlo visualizzato tagliato di lato. Vediamo come risolvere e rendere responsive i video youtube su WordPress.
Autore
Publisher
flavioweb.net
Logo
manuale seo gardening su amazon
About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.

Readers Comments (4)

  1. Grazie mi è stato molto utile.

  2. Grazie per le info, mi saranno molto utili per incorporare video youtube, anche senza plugin.

Inserisci il tuo commento

La tua email non sarà pubblicata


*


*

code