Come incorporare video YouTube e renderli responsivi nel sito web

Far adattare un video YouTube automaticamente allo schermo di qualsiasi dispositivo - essere quindi responsivo -  come per uno schermo di PC, tablet o smartphone, non è un operazione automatica da fare con il semplice copia e incolla di codice.

Più di un cliente, che si è lanciato nel video marketing,  mi ha chiesto come fare. Ed ecco allora una semplice guida per chi "smanetta" già un poco con i codici da incorporare.

Di solito Youtube, fornisce un codice del genere per includere i video nei siti web:

<iframe title="YouTube video player" src="https://www.youtube.com/embed/RoP-fw6WtYA" width="560" height="315" frameborder="0" ...ecc.

Ma il risultato, una volta incollato il codice YouTube nell'articolo (di un sito creato con WordPress,  Joomla, Shopify) sui cellulari potrebbe essere questo:

E il video del signore in giacca e cravatta viene così tagliato a destra, come vedi.

Come risolvere, per avere una visualizzazione responsiva dei video?

Suggerisco di agire con 3 passi:

1) Aprire i fogli di stile CSS del tuo sito web ed aggiungere questo:

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


Se usi WordPress è abbastanza facile: se sei loggato come Amministratore del sito, vai nell'opzione "Personalizza" che trovi nella barra scura in alto del tuo sito web. Da li, entri nell'opzione "Css aggiuntivo". E incollerai il codice sopra, come in figura.

Poi premi il tasto celeste "Pubblica".

2) Nell'articolo dove desideri inserire il video devi andare nella modalità "Testo", per poter inserire il codice HTML.

A quel punto devi inserire, prima del codice di incorporamento YouTube, questo:

<div class="video-responsivo">

ed alla fine del codice YouTube, questo:
</div>

Tutto assieme sarà quindi questo codice:

<div class="video-responsivo">
<iframe title="YouTube video player" src="https://www.youtube.com/embed/RoP-fw6WtYA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
</div>


3) Salva il tuo articolo e controlla online.

É tutto: buona visualizzazione dei tuoi video YouTube nel sito.