Video Youtube responsive



Video Youtube responsive

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

Rendere i video di Youtube responsive

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.

Incorporare un video youtube in una pagina WordPress | 360smartweb
Incorporare un video youtube in una pagina WordPress

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"videoyoutube">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

Shortcode ultimate
Shortcode 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:

Conclusioni

Fateci sapere quale metodo avete utilizzato e il motivo, o semplicemente se avete riscontrato problemi nella procedura.

POST CORRELATI

Massimiliano Piacentini

Proprietario di 360Smartweb

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.