Incorporare video Youtube responsive

Hai la necessità di incorporare video Youtube responsive sul tuo sito e non sai come fare? E’ facilissimo, segui le mie indicazioni qui sotto e in pochi secondi risolverai il tuo problema.

Migliaia di siti spiegano come incorporare un video di Youtube in modalità reattiva, ma utilizzano procedure lunghe e complicate. Io provo a spiegarti il mio metodo facile e soprattutto veloce per raggiungere lo stesso risultato in meno tempo.

Intanto, per chi non lo sapesse, la parola responsive indica un contenuto che si adatta in automatico al dispositivo in cui viene utilizzato. Mi spiego meglio: se, ad esempio, navighiamo dal nostro smartphone su una pagina web essa sarà responsive se si adatta alle dimensioni dello schermo del telefono e se rende facilmente leggibile i propri contenuti. Probabilmente avrà un testo le cui dimensioni saranno un pò più grandi rispetto ad una visualizzazione da un computer fisso; eliminerà gli elementi superflui che fanno da cornice al sito, dando priorità alla visualizzazione dei contenuti importanti, ecc…

Qui sotto un esempio pratico del sito www.ilovepantelleria.net: a sinistra la versione desktop del portale; a destra quella responsive, da smartphone.

sito-responsive

Come incorporare video Youtube responsive

Andiamo al sodo: per incorporare un video Youtube in modalità responsive nel proprio sito web è necessario copiare dalla pagina Youtube del video il codice da incorporare nel proprio sito.

Sotto il player del video scelto clicca su Condividi e poi nella scheda Codice da incorporare. Copia il codice che ti restituisce Youtube e incollalo nella tua pagina web, nella zona in cui desideri che appaia.

incorporare-video-youtube-responsive

Un esempio di codice che ci fornisce Youtube è questo:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/2NdpnYo3Vao” frameborder=”0″ allowfullscreen></iframe>

Per rendere responsive questo video devi fare una sola modifica al codice: al posto del valore 560 scriviamo 100%.

<iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/2NdpnYo3Vao” frameborder=”0″ allowfullscreen></iframe>

Con la modifica che hai fatto, in parole povere, hai detto a Youtube di non farti vedere ad una larghezza fissa il video a 560 pixel, ma di prendere tutto lo spazio disponibile della pagina. Se la pagina è più piccola di 560 pixel, il video si adatterà alle dimensioni senza lasciare così bordi o spazi vuoti.

A mio parere il fatto di incorporare video Youtube responsive è anche una questione grafica, nel senso che il sito appare molto più pulito, quindi consiglio a tutti questa piccola ma molto utile modifica.

2 Commenti

  1. Gianni 2 aprile 2017
  2. Mauro Silvia 3 aprile 2017

Lascia un Commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *