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:

image

Per vedersi apparire opzioni aggiuntive:

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

29 commenti:

Enri_Enfa ha detto...

non c'entra niente col tuo articolo ma i Refused non li conoscevo...adesso me li vado a cercare su youtube...grazie!!

Tenebrae ha detto...

@enrica: ah beh, la musica c'entra sempre! ;)

elena71 ha detto...

Ciao Orazio,

Ci tengo a linkare un tuo vecchio post (e non solo perchè mi citi :D ) per far capire ai nuovi bloggers l'importanza di tenere il blog il piu' possibile leggero e quindi piu' facilmente navigabile.

http://creareblog.blogspot.com/2008/12/cosa-fare-quando-il-nostro-blog-viene.html


P.S

Era un po' che non passavo di qui ed ho trovato dei cambiamenti veramente interessanti, i contenuti già lo erano, ma la grafica mi piace molto di piu' sebbene manchino i miei amati pizzi, lazzi e merletti! :D

Alessia ha detto...

Ciao Orazio,
non so come contattarti se non scrivendo nei commenti.Scusa se non è attinente con il tuo post, ma volevo sapere se sai spiegarmi perchè ogni tanto,mi compare una finestra con una immagine inequivocabile, questo è il link http://img453.imageshack.us/img453/5422/fanculo2rw8.gif per favore mi dici se è casuale? Puoi contattarmi sul mio blog? Grazie ciao Alessia

lella ha detto...

Ottimo post,ottimi consigli;in effetti non avevo mai fatto caso al personalizza vicino ai video.
Grazie mille
Lella

Illy ha detto...

Grazie! In effetti non l'avevo mai notata la scritta personalizza... Io per trovare la proporzione corretta quando devo modificare altezza e larghezza nel codice html faccio così: apro photoshop, creo un nuovo foglio con l'altezza e la larghezza originali, e poi ridimensiono l'immagine inserendo solo uno dei valori che ho scelto così mi mostra automaticamente l'altro valore (tengo sempre cliccato su mantieni proporzioni). Macchinoso vero? Conosci un modo più semplice? Ma che bravi sono i Refused?? Sembrano i miei adorati Strike Anywhere ma meno punk e più metal e anche un po' di grunge ;-P

Federico ٩๏̯͡๏)۶ ha detto...

Grandissimo! E grazie per la "citazione" ;)

Federico ٩๏̯͡๏)۶ ha detto...

E comunque, ti meriti 1000 punti per il video di I Love Rock& Roll!!!! XD

Alessandro ha detto...

Ciao tenebrae, innanzitutto complimenti per il blog... volevo chiederti (non centra niente con l'articolo, scusa): come hai inserito le nuove sezioni nel blog, quelle in alto a destra "home, gli essenziali, ecc.?
Grazie in anticipo. aspetto una tua risposta.

BudTerence ha detto...

Io sono l'amministratore del blog su blogger (www.budterencefe.tk) e mi piacerebbe molto inserire una home page. Allora, per inciso, io per home page intendo un'altra pagina, ovviamente scritta da me, che, una volta inserito l'indirizzo de mio sito, si visualizzi prima del resto, in modo da poter scegliere le varie categorie, links, banners. Insomma, una pagina principale in cui scegliere COSA visualizzare nel sito, con un link che faccia anche visualizzare gli ultimi post/articoli. Grazie mille!!! :)

micersoft ha detto...

ma cosa combini alla grafica Tenebrae??? Così non è più creare blog... :(

Tenebrae ha detto...

@micersoft: addirittura!

Boby ha detto...

a me piace anche questa, anzi forse anche un pò di più

Alessia ha detto...

Orazio,
hai notato che google ha rimpicciolito tutto! Non riesco più a leggere le mail di gmail! Aiuto per favore. ho fatto qualcosa io senza accorgermene (anche se non credo).AIUTOOOOOOOOOOOOOOO non leggo niente, i caratteri sono troppo piccoli.

Tenebrae ha detto...

@alessia: prova a tenere premuto control e muovi la rotellina del mouse :)

6nervoso ha detto...

Ciao Tenebrae,volevo chiederti come posso fare a scaricare i video di youtube.Ho saputo di www.keepvid.com ed ho riscontrato che è conosciuto,ma io non sono riuscito a cavare un ragno dal buco.Puoi darmi qualche delucidazione a riguardo?
Grazie e complimenti per la tua..."missione"!!!

frufrupina ha detto...

Ciao serena serata.bacioni.

Versione Beta ha detto...

Tenebrae ora ci disorienti...:) 2 cambiamenti in pochi giorni!! Comunque bella la nuova grafica, mi piaceva anche l'altra a dire il vero...

Marco ha detto...

Tenebrae..ti avevo inviato una mail qualche giorno fa, devo sempre risolvere il problema del "leggi tutto"...help me!!!!!!

Lanciere di Amsterdam ha detto...

Ciao! ti seguo da parecchio e mi "prostro" a te per l'ottimo lavoro svolto ;)
Ho da poco aperto un 3° blog e per la prima volta si è manifestato uno strano problema:
sotto il titolo del post appare una strana scritta "ON" che non riesco a levare in nessun modo...ho cercato in tutto l'html ma non riesco a capire dove dovrei intervenire...l'indirizzo è http://calcioolandese.blogspot.com/
magari riesci a darmi qualche dritta!
Ciao e grazie

Tenebrae ha detto...

@lanciere: quell'ON si riferisce alla visualizzazione dell'ora, puoi disabilitarlo o modificarlo cliccando su modifica nella sezione dei post da layout->elementi pagina

Roberto Ferranti ha detto...

Salve T. come posso uploadare un file pdf, da far poi scaricare ai visitatori del blog? Complimenti per il blog, veramente utile. Roberto Ferranti

Tenebrae ha detto...

@roberto: puoi usare skydrive per pubblicare il file in rete e poi linkarlo con elementi di tipo link

ho intenzione comunque di creare una guida sulla cosa

Tenebrae ha detto...

@versione beta: vero, ma non ero contento del vecchio template :)

BudTerence ha detto...

io vorrei inserire un claendari nei post, che indichi il giorno di pubblicazione. è possibile? Grzie mille!

Tenebrae ha detto...

6nervoso: ne ho appena parlato, magari trovi qualche informazione utile nel post che ho appena pubblicato, o qualche valida alternativa

@budterence: l'ho già in scaletta, ma dovrai avere un po' di pazienza :)

Giuli ha detto...

Ho scoperto da poco questo utilissimo sito. Ho molto da imparare ma inizio a comprendere qualcosa seguendo questi tutorial. Grazie!
Avrei una domanda: è complicato aggiungere delle immagini ai pulsanti o usare bottoni grafici invece del testo? Mi piacerebbe tanto dare un look più professionale al mio blog.

Empi! ha detto...

GRAZIE DEL POST!! Io continuavo a cambiare solo i primi due numeri non accorgendomi che i valori su larghezza e altezza erano anche alla fine! :D
blog assai utile!

simonapinto ha detto...
Questo commento è stato eliminato dall'autore.

Prima di lasciare un commento, leggete qui

Posta un commento