Video Youtube responsive
Tempo di lettura: 3 minuti
Oggi scopriamo come rendere i video Youtube responsive su una pagina web
Per rendere i video Youtube responsive su una pagina web, la procedura è abbastanza semplice, basta avere un minimo di dimestichezza con l’html e inserire nello style.css delle classi particolari.
Con l’avvento di Gutenberg in WordPress 5.x, rendere un video responsive è sufficiente copiare il link del video di Youtube e inserirlo all’interno di un qualsiasi testo all’interno della pagina, che Wp crea un codice “embed” automatico con un blocco Youtube html 5.
Questa procedura, però, permette soltanto l’inserimento con una dimensione standard, che non rispetta i nuovi standard per i layout responsive, sarà nostro compito, andare ad inserire una classe css per far si che si adatti a tutti i dispositivi in modo responsive.
Vediamo insieme come renderlo possibile
Come incorporare un video di Youtube su una pagina wordpress metodo 1
Youtube link
Per incorporare un video di Youtube basta andare sul social network video più famoso del mondo all’indirizzo www.youtube.it e cliccare alla voce “condividi”. Si aprirà una finestrella che permette di condividere il video attraverso vari servizi, e sotto di questa potete vedere un link “ridotto” con un tasto sulla destra “Copia”. Cliccateci e copiate il link appena generato.
Adesso vi basterà inserire il link appena copiato all’interno di un blocco di wordpress et voilà, il video sarà incorporato.
Come incorporare un video di Youtube su una pagina wordpress metodo Scelto da 360Smartweb
Youtube iframe
Come nel punto precedente, aperta la finestrella, potete cliccare sulla voce “incorpora”. Si aprirà una finestra che presenta il video sulla sinistra, e sulla destra un codice html con un tag <iframe>. Copiate tutto il codice e incollatelo sulla pagina WordPress.
Video incorporato 😉
Adesso vediamo come Rendere i video di Youtube responsive
Se esaminate bene il codice, vedrete subito la voce width=”px” (Larghezza del video) e height=”px” (Altezza del video). Sarà la prima cosa che un utente pensa di andar a modificare per rendere il video responsive.. peccato che non funziona.
Fase 1: Creare un Div con classe “video-youtube”
La sintassi è semplice:
<div class="video-youtube">codice copiato in precedenza</div>
Nel codice che avete appena incollate, è importante che andiate a cancellare le voci sopra citate “width” e “height”.
Andiamo adesso a lavorare un po’ nel css. Possiamo farlo sia attraverso il file style.css se siete un po’ pratici, o altrimenti cliccate nel menù di sinistra alla voce aspetto > personalizza > css aggiuntivo.
Inserite qui al suo interno il codice seguente (ringraziamo Techyou per il codice css)
.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%;
}
Metodo alternativo
Se non siete pratici di modifiche a codici ecc, il metodo più veloce, facile e sicuro è quello di installare il seguente plugin:
SHORTCODES ULTIMATE
Cliccate alla voce “plugin” nella barra di sinistra e “aggiungi nuovo”.
Cercate “Shortcodes ultimate” e installate il tutto.
Adesso, se inserite un nuovo blocco con l’editor classico di WordPress o semplicemente attraverso un blocco paragrafo, apparirà un icona [ ] che vi permette di eseguire innumerevoli azioni, tra cui l’inserimento di un video di youtube, in modalità responsive. 😉
Il risultato che otterrete è il seguente:
[su_youtube url=”https://youtu.be/VMp55KH_3wo” width=”900″ height=”660″]
Conclusioni
Fateci sapere quale metodo avete utilizzato e il motivo, o semplicemente se avete riscontrato problemi nella procedura.
