Tempo fa un lettore del blog lasciò un commento in cui chiedeva come realizzare un piccolo “trucco” per un video di youtube “embedded” (incorporato) in una pagina web: ovvero come far si che un’immagine scelta ad “hoc”, una volta cliccata, mostrasse il video nel punto stesso in cui si trova l’immagine (una specie di “thumbnail” personalizzata per un filmato inserito nella pagina) .
L’immagine di anteprima dei video di youtube è estrapolata automaticamente dal video (chi ha caricato il filmato può scegliere tra 3 sole immagini), e spesso bisogna avere parecchia fortuna perché sia attraente, rappresentativa del contenuto e tale da indurre il visitatore a guardare il video: spesso non ha nessuna di queste caratteristiche.
Se ciò succede , per quanto riguarda la visualizzazione del video su youtube dobbiamo metterci l’anima in pace ( aggiornamento: in realtà anche in questo caso esiste un espediente, vedi qui …) : ma per un video “embedded” si può fare molto,ed è proprio di questo che si parla in questo post.
Prendendo spunto da quel commento, ho pensato quindi che un trucchetto di questo genere permettesse di ottimizzare il modo di presentare un video di youtube inserito all’interno di una pagina web, e soprattutto potesse indurre maggiormente i visitatori a guardare quel determinato video (cosa molto utile in varie situazioni).
Ma come fare? Dopo qualche ricerca online, ho interpellato il buon Timendum che mi ha fornito il codice necessario per ottenere il risultato voluto (e che è riportato più avanti in questo post).
Ma vediamo di che si tratta: nell’esempio sotto ho inserito un’ immagine che sembra in tutto e per tutto un video “embedded”, in realtà non lo è, e se cliccata avvierà la riproduzione del “vero” video, prova a cliccarla:
L’anteprima originale del video in questione è invece quella sotto , una notevole differenza per la “call to action”:
Attenzione: l’esempio che ho riportato sopra è volutamente provocatorio per rendere chiaro quello che secondo me NON dovrebbe essere fatto.
Questo piccolo trucco infatti si rivela efficace NON per ingannare (proponendo immagini di anteprima che non hanno alcuna relazione con il contenuto del video, come ho fatto in questo caso), ma per OTTIMIZZARE la presentazione del video scelto, scegliendo un’ immagine idonea, bella e che involgi a cliccare il tasto “play” .
Ma questo penso che sia abbastanza chiaro: se metto come anteprima la foto di una bella ragazza e poi nel video c’è solo uomo barbuto che parla in primo piano, l’utente sarà infastidito e non lo guarderà sicuramente …
Se invece l’anteprima che mettiamo è comunque correlata ai contenuti del video, il video sarà sicuramente guardato e l’utilizzo di un’immagine “ottimizzata” avrà avuto un ruolo fondamentale nello spingere l’utente ad avviare la riproduzione .
Dopo questa predica, ecco come ottenere l’effetto visto sopra.
Per farlo usa il codice che riporto di sotto, dove al posto di “INDIRIZZO-IMMAGINE” devi metter l’ URL dell’immagine caricata online e al posto di “CODICE-EMBED” appunto il codice da incorporare preso da youtube:
Ricordati che se vuoi ottenere un effetto migliore (come visto sopra) , il video deve partire automaticamente dopo che hai cliccato l’immagine, evitando di dover far cliccare ancora l’ utente, nel qual caso tale espediente non avrebbe molto senso .
Per far questo devi aggiungere nel codice di embed fornito da youtube il parametro autoplay=1 subito dopo l’ URL del video e gli altri parametri .
Mi spiego meglio: se all’interno del codice di embed (o codice da incorporare) la URL è ,ad esempio:
http://www.youtube.com/v/Yf5C2EYViRM&hl=it_IT&fs=1
…alla fine dovrai aggiungere &autoplay=1 , in modo che diventi:
http://www.youtube.com/v/Yf5C2EYViRM&hl=it_IT&fs=1&autoplay=1
e ( molto importante) dovrai farlo due volte, in entrambi i punti in cui appare la URL nel codice di youtube.
Nell’esempio che ho mostrato, con l’immagine di anteprima, ho deciso di riproporre in toto il look del player di youtube, creando un’immagine con vari livelli in photoshop, in modo da poterla utilizzare poi come base in ogni situazione, dovendo solo aggiungere la foto desiderata di volta in volta.
Se qualcuno volesse questo file .psd già pronto lo può scaricare da qui, in cambio chiedo solo un “like” su Facebook cliccando il pulsante che trovi qui sotto, dopo averlo cliccato apparirà il link per il download :
Comunque potresti anche voler utilizzare un’immagine con un aspetto diverso dal player di youtube, l’importante è inserire comunque un tasto “play” per rendere chiaro che si tratta di un video.
Altra nota MOLTO IMPORTANTE: se vuoi inserire più di un video nella stessa pagina usando questo codice, è opportuno che modifichi le diciture imageTWV e videoTWV ovunque le trovi (2 volte a testa) nel codice che ti ho fornito in precedenza, devono essere UNICHE ed accoppiate nella stessa pagina, ad esempio potresti mettere imageTWV2 e videoTWV2 per un secondo filmato.
Ecco un altro esempio, inserito nella medesima pagina facendo appunto le modifiche appena descritte :
15:44
Complimenti per questo articolo! L’ho subito messo in pratica qui: http://www.modellismosorrento.com così come ho subito provato il servizio gratutito di animoto.com, veramente lodevole.
Mi tornerebbe utile l’esempio in .psd in modo da sfruttare l’immaìgine del play… ;P
Grazie mille per i consigli!!!
19:03
Ciao,
ti consiglio di cambiare ‘image’ e ‘video’, sono troppo generici e rischiano di sovrapporsi ad altri elementi presenti nella pagina (es: nel tema di wordpress).
Io nel codice avevo messo imageTWV non a caso, proprio per evitare questi problemi.
Quando meno segnalano nel caso non vada il codice, la prima cosa è provare a cambiare quelle due parole.
19:46
@Timendum: Allright, modificato il post con i suggerimenti, grazie per la precisazione.
Ciao
20:38
complimenti per questo articolo,molto,molto interessante,lo mettero in pratica sicuramente,grazie perl l’ottimo lavoro
23:33
Ottimo post! Anche a me farebbe comodo il .psd Molte grazie per l’aiuto che ci dai
ciao
13:00
Ciao Alex, innanzitutto complimenti per questo blog, ti seguo da diversi mesi e offri sempre degli spunti interessanti. Questo post in particolare mi è piaciuto e ti chiedo se puoi inviarmi il file in .psd dell’anteprima e ti ringrazio in anticipo.
Magari poi prossimamente vorrei scambiare qualche parere con te via mail su alcune camcorder, sono preso dalla voglia di cambiare la mia Samsung.
Ciao e buon Anno!
13:36
Interessante articolo, in youtube è possible cambiar el’immagine di anteprima scegliendo fra le tre tuttavia poi l’embedding in altri siti tipo facebook propone quella vecchia e non ho ancora chiaro ogni quanto si aggiorna l’anteprima di embedding in alti siti, 24 48 ore o mai e rimane quella proposta di default di youtube?
18:09
@tha vix: Il fatto è che talvolta questo aspetto dell’ embedding dei video di youtube in facebook non è esente da difetti , e lo dimostra il fatto che la voce “scegli un anteprima” non è attiva.
Tieni conto che anche su youtube stesso l’update di una thumbnail ci mette un po’ ad essere effettivo.
Comunque, per quella che è la mia esperienza personale, mi sembra di ricordare che l’immagine di anteprima dopo un po’ cambi anche nei video “embedded”, ma più che altro in normali siti/blog, su facebook non ci giurerei.
E soprattutto ci può mettere dalle 6 ore ai 2 giorni per propagarsi ovunque.
Comunque il problema da te segnalato ogni tanto si verifica, a titolo di esempio guarda qui:
http://help.youtube.com/group/youtube-issues/browse_thread/thread/45e07651c63e3e3d/02d250c3d34862f1?lnk=gst&q=thumbnail+embedded#02d250c3d34862f1
se la cosa si protrae si può comunque segnalare un bug, qui le istruzioni:
http://help.youtube.com/group/youtube-issues/browse_thread/thread/4aac5b4e6e13a189/abc3ee2895ea439f?lnk=gst&q=thumbnail+embedded#abc3ee2895ea439f
Oppure si mette l’anteprima che si vuole come piegato nel post !
19:19
HO trovato un sito che risponde in modo chiaro ai miei dubbi.
Ottimo lavoro, grazie!
provo subito a mettere in pratica ma non ci giurerei di riuscire
Se ti è possibile mandarmi il .psd con l’anteprima, te ne sarei grata!
A presto
12:08
Ciao,
ho usato il codice presente in questo post per fare l’embedded di un video da youtube…. è possibile che questo codice ostacoli in qualche modo le statistiche Insight di youtube? Mi spiego meglio… usando il semplice embedded di un video, nelle statistiche di origine delle visite di youtube mi compariva la voce player incorporato con i dati giornalieri delle visite partite dal mio sito! invece nelle statistiche del video incorporato con il codice embedded postato da te questa voce non compare….è possibile?
grazie mille
12:27
@Michela: penso che la tua ipotesi non sia da escludere, nel senso che youtube potrebbe non identificarlo più come “player incorporato” perché il codice è in qualche modo modificato, ma non ci metterei la mano sul fuoco.
Se poi queste visualizzazioni siano perse in assoluto nelle statistiche, oppure vadano a finire in qualche voce diversa dal “player incorporato”, questo no te lo so dire perché fino ad ora ho fatto dei test con video non miei.
Ciao
17:35
Ciao!! complimenti per l’articolo! io ho un piccolo problema… funziona tutto ma non l’autoplay.
Poniamo che questo sia il mio embed:
autoplay=1
E’ giusto dove l’ho messo o ho sbagliato qualcosa??
grazie in anticipo
e complimenti ancora per l’articolo, davvero interessante !
18:52
ciao, ho letto il tuo post che trovo molto interessante! purtroppo sono una neofita davvero poco esperta e non riesco a seguire le tue istruzioni. puoi aiutarmi? questo video caricato su drop.io non fornisce anteprima se provo a emeddarlo in un blog. vorrei mettere un’immagine come hai fatto tu. questo è il codice. mi dici cosa devo cambiare? grazieeeee
Discover Simple, Private Sharing at Drop.io
09:58
Scusami, ho provato a usare il codice che hai fornito tu ma non funziona.. è corretto? grazie
13:09
Certo , entrambi gli esempi che ho inserito nel post funzionano ed ho usato il codice che ho indicato, ovviamente inserendo embed code ed URL nei campi indicati , sei sicuro di aver letto bene le istruzioni ?
10:09
Salve, sono quello del primo post di complimenti per il video. Io ho inserito sia l’immagine personalizzata che l’autoplay, da qualche settimana sto riscontrando che con firefox cliccando sull’immagine iniziale non accada nulla mentre con “purtroppo” explorer tutto il video parte. Per chi volesse provare il video è su questo link http://www.modellismosorrento.com
Grazie e buona giornata a tutti
17:36
Grazie per la preziosa informazione, stavo impazzendo per cercare di cambiare la immagine del video dall’interno di youtube. Se mi puoi mandare il psd del player youtube sarebbe perfetto.
Grazie mille!!
11:48
Ciao e complimenti per l’articolo. Avrei una domanda: sapresti gentilmente dirmi se questo meccanismo ha una buona compatibilità con i browsers? Mi riferisco in particolare alle vecchie versioni di IE (6, o quantomeno la 7), che generalmente sono quelle che hanno sempre più problemi. Grazie mille.
14:50
@Giorgio: in generale questo metodo, per funzionare, prevede che debba essere attivato Javascript nel browser (il che accade ormai per il 95% degli utenti ) , quindi non dipende tanto dalla versione del broswer in uso ma piuttosto dalle impostazioni che l’utente ha messo (e ripeto, di solito javascript è sempre attivo di default se uno non ci mette mano volutamente per disattivarlo) .
Personalmente ho provato anche con explorer 6 che ho su un vecchio pc e funziona.
08:54
Confermo la compatibilità anche con firefox e chrome (evidentemente oramai è consolidato che i browser per default hanno i javascript attivati). Grazie ancora. Se ti può interessare, sto costruendo il layout del player con la grafica aggiornata a questi ultimi mesi. (Sto lavorando con paint shop pro, e non so se il suo formato proprietario è supportato da photoshop, magari si può fare qualche prova se vuoi). A presto, ciao.
09:04
Benissimo, magari aggiornami sempre nei commenti quando hai il player nuovo pronto, infatti era una cosa che volevo fare anch’io ma tra una cosa e l’altra me ne sono scordato …
20:20
Ciao, ho tutto pronto. Se vuoi, contattami pure per mail. A presto, ciao.
10:59
Le istruzioni sono dettagliate e fanno proprio al caso mio! Grazie! Se puoi mandarmi il psd ti ringrazio in anticipo.
16:17
@ Daniele: player inviato per email
13:26
ciao alex, senti io ho capito tutto il procedimento ma su youtube dove devo inserire il codice riportato da te? i miei video già sono su youtube e alcune immagini iniziali si vedono sfocate e vorrei mettere una che voglio io, posso farlo? grazie in anticipo
13:44
@tony: direttamente su youtube non lo puoi fare , questo metodo funziona con i video di youtube ma solo se li inserisci in un tuo sito.
23:34
ciao potresti mandare anche a me il PSD dell’immagine??
grazie
11:31
ciao
ho provato ad inserirlo nel mio sito ma non funziona: non si può utilizzare su siti in PHP?
grazie
11:46
@luca: certo, anche wordpress utilizza php, quindi dovrebbe funzionare: per esperienza ti dico che la maggior parte delle persone a cui all’inizio non funzionava sbagliavano ad utilizzare il codice.
Oppure, cosa ANCORA PIU’ IMPORTANTE: hai attivato javascript per il tuo browser ? Se non lo fai non funzionerà mai .
Ciao
10:26
ciao alex, grazie mille per la risposta.
javascript è attivato e ho pravato in più modi ma non va..c’è qualche accorgimento per i siti in PHP che va preso/fatto rispetto ai siti in HTML semplici?
grazie mille…
12:15
Così non ci sono elementi per poter aiutare, quantomeno servirebbe l’URL della pagina dove hai inserito il video e/o il codice esatto che utilizzi, eventualmente fai un copia/incolla qui nei commenti .
14:03
grazie ancora per la risposta.
il sito è myperfectcolon.com
il codice è quello che è inserito in questa pagina, ovviamente andando a cambiare gli url del video e dell’immagine.
grazie ancora..
14:22
Ho capito che hai usato quello di questa pagina, ma dovresti segnalarmi ESATTAMENTE quello che hai provato tu (con tanto di url dell’immagine e codice di embed), completo, magari c’è qualche piccolo errore, altrimenti non se ne viene a capo .
Ripeto, se fai copia/incolla qui nei commenti forse posso aiutarti .
16:19
CODICE-EMBED
16:21
il codice che ho inserito è questo:
ho provato ad inserire anche solo l’url del video e non il codice da incorporare ma mi appare solo l’immagina ma pur cliccandoci sopra più volte non si avvia nulla..mi sai aiutare?
16:48
???
16:48
? Non hai inserito nessun codice …
17:39
l’ho inserito ma non lo visualizza…per fartelo avere, ti ho inviato un email
10:07
ciao potresti mandare anche a me il PSD dell’immagine??
Sicuramente avrò dei problemi, non sono bravo in queste cose.
Ti ringrazio
08:05
Ciao, grazie per l’articolo, cercavo una soluzione simile.
Il tutto funziona a dovere, ma con il browser Chrome il video parte in automatico senza neanche cliccarci sopra, ma l’immagine resta quella di anteprima, con il risultato che si sente solo l’audio! Hai qualche idea di come risolvere?
A chi chiede il psd basta scrivere su google “official youtube player psd”, ce ne sono una vagonata!
09:12
Ciao Alex. Anche da parte mia grazie per questo articolo. Ho provato a usare la stessa tecnica non per i video YT, ma per i video di Facebook. Ho raggiunto il risultato che volevo tranne per una cosa: nell’embedded che Facebook mi dà, non so dove aggiungere la scritta
&autoplay=1
Ti porto qui di seguito un esempio di codice embedded di FB, così magari puoi dirmi dove inserire tale parametro:
Dammi questa dritta e sono a posto!!
GRAZIE!!!
02:36
Ciao, stupenda guida, molto utile! GRAZIE 1000
Potresti x cortesia inviarmi il PSD con i livelli del player come hai fatto tu??
GRAZIE MILLE ^^
19:29
Ciao, da me non funziona
quando inserisco il codice “&autoplay=1″ il video parte da solo anche se non clicco sulla jpg di anteprima…
Cosa devo fare?
23:54
Così non saprei come aiutarti, non vedendo il codice: sicuro di aver usato il codice di embed di vecchio tipo e non quello nuovo (iframe )?
17:59
grazie dell’erticolo molto utile
ti ringrazio se mi puoi inviare l’immagine del player
22:37
Bellissimo post. Ho inserito il codice e tutto funziona perfettamente. Non voglio essere troppo diretto ma potresti mandarmi quel file per creare il video con la mascherina di youtube.
Email : seanfilipin@gmail.com
09:26
@Sean: te l’ho inviato per email, controlla che non venga filtrato come spam dato che c’è l’ allegato.
Ciao
00:18
Ottimo! Grazie del post, potresti mandare anche a me il PSD con i livelli del player?
Grazie!
09:56
@Marco: te l’ho mandato.
Ciao
14:07
Ciao, premetto che non sono per niente pratico..quindi mi scusa e vorrei sapere se è possibile modificare il video gia pubblicato su youtube inserendo la mascherina e l’autoplay? (su facebook appare una fato senza riquadro play)
grazie tante, Igna
17:39
Scusate mi sento un pò impedito… ho provato più volte a fare come descritto nel tutorial…ma l’unico risltato che ottengo è quello di linkare l’immagine, del video non se ne vede traccia…non riesco a capire dove sbaglio.
copio il codice, inserisco il link dell’immagine da mettere come anteprima e inserisco il link del mio video esistente in youtube, come già citato in precedenza, il risultato è un collegamento all’immagine e basta.
Qualcuno sa dirmi dove sto sbagliando per cortesia?
Grazie, buona giornata.
15:52
Beh, complimenti per l’articolo che, vedo, continua ad avere commentatori nonostante sia stato postato un po’ di tempo fa! Grazie per questa soluzione, l’ho passata al ns webmaster in quanto proprio in questi giorni stavamo cercando una soluzione per l’anteprima dei ns video sul sito. Se poi mi puoi mandare quel .psd saresti grande!
grazie ancora,
17:26
@Cristina: Ciao, ti ho inviato il file .psd x email
08:05
Ho provato a farlo ma non funziona. come si fa??
08:50
Il metodo è quello spiegato, non so come l’hai applicato e quali problemi hai, come alternativa per fare l’embedding di un video con immagine personalizzata ti consiglio di provare “jw player”, lo puoi installare semplicemente con il relativo plugin: http://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/
Anzi, con jw player è anche meglio perché l’immagine di anteprima che scegli verrà indicizzata anche da google e la pagina in cui inserisci il video potrebbe apparire nei risultati della ricerca di google con la relativa immagine.
09:02
Ciao, ottimo articolo, grazie!!! ^_^
L’ho messo in pratica qui: http://www.isfi.ch/
Il codice YouTube è ora diverso da quello presentato anni fa nell’articolo, ho dunque provato comunque ad inserire l’autoplay ma non me lo prende… Idee?
A presto,
Teju
09:06
Ok, trovata la soluzione: al posto che mettere “&” ho messo il corrispettivo HTML “&” e così “LINK_VIDEO&autoplay=1″ funziona!
Magari è utile anche ad altri! ^_^
Ciao ciao
00:15
Complimenti!! Potrei avere il psd. Grazie
09:16
Ti ho inviato il file psd, è però basato ancora sul vecchio player di youtube.
ciao
23:55
Ciao, vorrei sapere dove dovrei mettere questo codice embed.
11:19
perchè viene gigante anche se da code metto i parametri che voglio? help
18:58
ciao Alex, ho provato e riprovato, ma purtroppo non mi funziona. mi compare l’immagine sopra e il video sotto. fallimento totale insomma.
questo è l’url dell’immagine: http://img854.imageshack.us/img854/6001/playerx72.jpg
e questo è il video: http://youtu.be/VvgkskwQ1aU
spero tu mi posso aiutare.
grazie in anticipo
Olga
09:53
non ho capito bene cosa intendi per “immagine sopra e video sotto” è quello che in effetti deve succedere, l’immagine copre il video e quando la si clicca parte la riproduzione del video ….prova comunque a mettere l’immagine sugli stessi server dove si trovail sito, non su imageshack .
18:45
@OLga: forse ho capito in cosa potresti aver sbagliato, probabilmente usavi il nuovo codice di embed di youtube (quello con iframe), invece devi usare quello vecchio mettendo la spunto sotto il video quando prelevi il codice da youtube, comunque ho provato con il tuo video e l’immagine e funziona perfettamente, ti ho mandato il codice per email.
13:04
Grazie! l’ho messo in pratica qui: http://www.inarte.it
(in fondo alla pagina)
E’ l’unico codice che NON MI DA PROBLEMI con altri script integrati nella pagina.
Avevo provato questo, ma interferiva!
function video(){
var video = “”;
$(“#video”).html(video);
}
N.b: Slash prima degli apici.
♥♥ Grazie e complimenti per il sito! ♥♥