Cambiare la dimensione di un video da Youtube per adattarlo al template del nostro blog

Uno dei problemi che si hanno inserendo un video da Youtube nel blog è la sua dimensione: in un post va benissimo, ma volendolo inserire in un elemento di una sidebar è quasi impossibile a meno che non sia abbia un template adatto. E in effetti a volte mi capita di vedere video per metà fuori dalla  pagina del blog.

Per rispondere a Federico e a tutti gli altri che me l’hanno chiesto, vediamo come risolvere il problema, adattando le dimensioni dei video alle nostre esigenze.

Prelevare il video da Youtube scegliendo le dimensioni e personalizzandone l’aspetto

Già quando preleviamo il video da Youtube è possibile scegliere dimensioni diverse, anche se magari la cosa è un po’ nascosta e non ci si fa caso. Basta cliccare sull’icona “Personalizza” vicino al codice HTML da incorporare:

Per vedersi apparire opzioni aggiuntive:

Vediamole:

• Includi video correlati: come si capisce facilmente, aggiungerà un elenco di video correlati a quello che abbiamo pubblicato
• Mostra bordo: aggiunge un bordo al video
• Enable delayed cookies: i cookie di Youtube non verranno scritti subito ma solo se il video viene riprodotto

Più sotto, è possibile scegliere il colore del lettore, e ancora più sotto alcune dimensioni standard, che vanno da 320x265 a 640x505.

Una volta cambiate le opzioni, possiamo prelevare il codice HTML per incorporare il video nel nostro blog.

Ecco cos’è possibile ottenere smanettando un po’:

 

Personalizzare le dimensioni del lettore

Anche la dimensione minima tra quelle proposte però potrebbe essere troppo grande, specie se avete un blog a tre colonne e volete inserire il video dentro una di queste. Potete risolvere però ritoccando il codice HTML da incorporare a mano. Basta cercare le codice le dimensioni width e height, cioè larghezza e altezza, e modificarle a mano

<object width="320" height="265"><param name="movie" value="…. width="320" height="265"></embed></object>

Questo è solo un estratto del codice completo, comunque si vedono bene in grassetto gli elementi di cui parlavo: 320 rappresenta la larghezza, 265 l’altezza. Basta modificarle a mano secondo le proprie esigenze, cercando di mantenere le giuste proporzioni. Ad esempio, il video che ho messo in alto nel post ha una larghezza di 100 pixel e un’altezza di 82. Modificando l’estratto di sopra con queste dimensioni, otteniamo:

<object width="100" height="82"><param name="movie" value="…. width="100" height="82"></embed></object>

Per quanto riguarda la larghezza, è anche possibile esprimerne le dimensioni in percentuale. Ad esempio, per occupare tutto lo spazio a disposizione (ad esempio tutta la larghezza della sidebar) potete usare:

width="100%"

Oppure per lasciare un certo margine:

width="90%"

Considerate però che dovrete regolarvi manualmente poi con l’altezza.

E questo è tutto. Vi lascio con un ultima bellissima canzone che adoro, dei Refused:

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!