La stragrande maggioranza dei blogger integra all’interno dei propri articoli il codice HTML fornito da YouTube senza preoccuparsi di come il video apparirà da smartphone. Considerando che oggigiorno si naviga più da mobile che da desktop, il risultato per la maggior parte dei visitatori sarà un’esperienza utente davvero spiacevole.
Per questo motivo, bisogna prestare attenzione quando si carica un video YouTube su WordPress: l’iframe deve avere misure ben precise, adatte sia alla visualizzazione da computer che da smartphone e tablet.
Inoltre, un video YouTube integrato così malamente influisce negativamente sul CLS (Cumulative Layout Shift), uno dei segnali vitali di qualità di un sito web secondo Google. Come puoi fare per rimediare a questo? Dovrai rendere l’embed flessibile, responsive, in modo che si adatti automaticamente allo schermo del dispositivo dell’utente.
Come rendere video YouTube responsive su WordPress
I video YouTube permettono di arricchire gli articoli su WordPress. Ecco come rendere perfetti gli embed per una corretta visualizzazione sia da desktop che da smartphone.
Per rendere video YouTube responsive su WordPress, ci sono ben due strade diverse che puoi percorrere:
- Intervenire manualmente per ogni video, aggiungendo CSS aggiuntivo e HTML direttamente nella scheda Testo dell’editor di WordPress.
- Aggiungere CSS e PHP per rendere automaticamente tutti i video YouTube responsive. La modifica agirà sui video già presenti sul tuo sito ed anche su quelli che caricherai in futuro.
Se carichi pochi video o il tuo sito è all’inizio, puoi scegliere la prima strada. Se invece hai diversi video sparsi sul tuo sito, dovrai ricorrere al secondo metodo, così da effettuare una modifica generale senza dover aprire ad uno ad uno i tuoi articoli.
Sei pronto per cominciare?
Un video (CSS+HTML)
Il primo metodo che proponiamo per rendere responsive un video YouTube su WordPress, consiste nell’aggiungere manualmente del codice CSS e HTML per ogni video YouTube caricato.
Per rendere responsive un video YouTube con questo metodo, ti basterà accedere al wp-admin del tuo sito WordPress e recarti in Aspetto > CSS aggiuntivo.
Nell’area di testo a sinistra che si aprirà, scorri fino in fondo e incolla il seguente codice all’interno:
//inizio youtube responsive
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
//fine youtube responsive
Premi su Pubblica (in alto) per confermare e salvare la modifica.
Adesso, procurati come di consueto il codice HTML del video YouTube da integrare. Apri l’articolo dove lo vuoi aggiungere e spostati nella scheda Testo (etichetta presente in alto a destra nell’editor). Qui, incolla il seguente codice:
<div class="youtube-responsive-container">
<iframe title="YouTube video player" src="https://www.youtube.com/embed/videoid" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-mce-fragment="1"</iframe>
</div>
Ora, sostituisci videoid con l’ID del video YouTube che vuoi integrare.
Tutti i video (CSS+PHP)
Se hai tanti video nel tuo sito, puoi renderli tutti responsive automaticamente, senza dover aprire una ad una le pagine e modificarle singolarmente. Per riuscirci tramite questo metodo, dovrai aggiungere del codice CSS al tuo tema e una regola PHP al file functions.php di WordPress.
Sconsigliamo, però, di modificare il file functions.php, in quanto questa operazione è rischiosa e bisogna ripetere il passaggio ogni volta che WordPress si aggiorna. Consigliamo, invece, di adoperare un plugin per aggiungere uno snippet PHP con la regola richiesta.
Per procedere, ti basterà accedere al wp-admin del tuo sito WordPress e recarti in Aspetto > CSS aggiuntivo.
Nell’area di testo a sinistra che si aprirà, scorri fino in fondo e incolla il seguente codice all’interno:
//inizio youtube responsive
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
//fine youtube responsive
Premi su Pubblica (in alto) per confermare e salvare la modifica.
Ora recati in Plugin > Aggiungi nuovo.
Digita Code Snippets nel campo di ricerca in alto a destra per far apparire il plugin. Premi su Installa adesso per installare il plugin e poi clicca sul tasto Attiva che appare al termine dell’installazione.
A questo punto, non ti resta che creare lo snippet PHP con la regola per eliminare la libreria CSS di Gutenberg. Per procedere, recati con il puntatore del mouse sulla voce Snippets nella sezione a sinistra e clicca su Aggiungi nuovo.
Digita un titolo per lo snippet (es. YouTube Responsive) e incolla il codice PHP presente qui sotto:
// inizio youtube responsive
add_filter('the_content', function($content) {
return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
});
add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
} else {
return $html;
}
}, 10, 4);
add_filter('embed_oembed_html', function($code) {
return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);
});
// fine youtube responsive
Assicurati che la voce Esegui lo snippet ovunque sia spuntata, poi premi sulla voce Salva le modifiche ed infine su Attiva, in alto a destra.
Ecco fatto. Una volta ultimata la modifica, potrai tornare ad integrare video YouTube come prima, prendendo il codice HTML da YouTube e caricandolo nella sezione Testo all’interno dell’editor WordPress. In automatico, il video verrà ridimensionato in base al dispositivo di visualizzazione.
Ora sai come rendere responsive tutti i video YouTube sul tuo sito, intervenendo manualmente o facendo una modifica generale. Se stai riscontrando problemi, lasciaci un commento qui sotto.
