Come incorporare video YouTube e renderli responsivi nel sito web

Pubblicato: 10-11-22, da Nicola Di Grazia
[responsivevoice_button rate="1" pitch="1" voice="Italian Male" buttontext="LEGGIMI IL TESTO"]
video responsivo
Condividi questo articolo
Tempo di lettura: 2 minuti

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:

video

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.

css wordpress

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.

modalità testo

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.

seo

Il tuo sito web ha poche visite?

Migliora il suo posizionamento: chiedi una consulenza SEO.

I 5 articoli più letti

Podcast

My Agile Privacy
Questo sito utilizza cookie tecnici e di profilazione. Cliccando su accetta si autorizzano tutti i cookie di profilazione. Cliccando su rifiuta o la X si rifiutano tutti i cookie di profilazione. Cliccando su personalizza è possibile selezionare quali cookie di profilazione attivare.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram