Incorporare video YouTube responsive sul proprio sito

Se hai provato ad incorporare un video di YouTube sul tuo sito web fatto in Wordpress, Joomla o altri CMS ma ti sei accorto che non si ridimensiona in base alla larghezza del dispositivo? È del tutto normale e succede perché il codice di incorporamento del video Youtube possiede altezza e larghezza fisse.

Naturalmente tutto ciò può rappresentare un problema, poiché, sebbene sui computer desktop sia un aspetto trascurabile, sui dispositivi mobile la visualizzazione non è per niente ottimale. Per questa ragione è necessario un codice di incorporamento video di YouTube resposive, ovvero che si adatti automaticamente allo schermo del dispositivo dal quale viene visualizzato.

Chi ha un minimo di esperienza con il Web Design, potrebbe pensare che i video con una larghezza del 100% si ridimensionino automaticamente, purtroppo non è così ma fortunatamente la soluzione è piuttosto semplice. Infatti è possibile rendere responsive i video di YouTube utilizzando del codice CSS e HTML. Non preoccuparti, nulla di complicato, anche se non hai dimestichezza con questi linguaggi, seguendo questi pochi passaggi ci riuscirai senza problemi… Ecco quindi come creare un video YouTube mobile!

La prima cosa che dovrai fare sarà aggiungere del codice CSS al foglio di stile del template del tuo sito. Per facilitare l'operazione, alcuni template permettono di inserire CSS personalizzato per sovrascrivere il CSS predefinito, in questi casi sarà sufficiente incollare il seguente codice nel campo "custom CSS" del tuo template e salvare le modifiche.

Ecco lo stile CSS da aggiungere:

.video-responsive { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-responsive iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

A questo punto dovrai modificare il codice HTML del video YouTube che vuoi inserire nella tua pagina web aggiungendo il seguente tag:

1. <div class="video-responsive"> (da inserire prima del codice di incorporamento YouTube);
   
2. </div> (da inserire alla fine del codice di incorporamento YouTube).
   

Ecco un esempio di come dovrebbe apparire il codice di incorporamento YouTube alla fine della modifica:

<div class="video-responsive"><iframe width="560" height="315" src="https://www.youtube.com/embed/htZ2ENfGlIY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Fatto ciò il video YouTube diventerà reattivo e si adatterà automaticamente alla visualizzazione sui dispositivi mobile.