Pubblicato il 02/10/14 - aggiornato il  | Nessun commento :

Come personalizzare il player di Youtube e aggiungere un logo con reEmbed.

Come personalizzare stile, colori e logo del player di Youtube o Dalymotion con reEmbed, servizio gratuito che offre anche le ststistiche delle visualizzazioni.
Una delle funzionalità più importanti di Youtube è quella che ci permette di implementare i video nelle nostre pagine web semplicemente incollando un codice. Lo stesso Youtube offre la possibilità di tutta una serie di personalizzazioni del player a partire da quella più importante che riguarda le sue dimensioni. Un tema importante è sicuramente quello della riproduzione dei video incorporati se si aprono le pagine con un dispositivo mobile. Specialmente se si ha un blog su Blogger e se si sceglie il vecchio codice di implementazione la dimensione del video potrebbe non adattarsi alla risoluzione del dispositivo. È nato da poco un servizio che permette di personalizzare il player e di adattarlo automaticamente ai dispositivi mobili più diffusi che può risolvere molti problemi.

reEmbed è un servizio gratuito e che rimarrà tale almeno nella sua versione di base che permette di personalizzare il player anche per tutti i video di Youtube già postati nel vostro sito. Si può aggiungere il nostro logo e scegliere i colori più adatti al nostro layout


reembed

Ci si può registrare gratuitamente subito oppure aspettare a farlo dopo aver creato il nostro player andando su Create your free player. Nella finestra successiva si sceglie lo stile del player
 
stile-player-reembed[4]

Il passo successivo sarà dedicato al caricamento del logo del nostro sito e alla scelta dei colori

inserire-logo-blog-video

Si carica una immagine, si ridimensiona e si posiziona a piacere a sinistra o a destra scegliendo anche la distanza dai bordi tramite tre comodi cursori. Ci sono anche i tool per personalizzare tutti i colori del player anche utilizzando delle tavolozze. Quando si è finito si va su Save Player

youtube-player-video

Se non lo avete fatto in precedenza dovrete inserire email e password per salvare il vostro lavoro

reembed-login-register

Dalla vostra Dashboard potete comunque creare o modificare i player come e quando volete

dashboard-reembed

Si va su Install on your site e si sceglie la piattaforma di blogging utilizzata

installare-nel sito-reembed

Nel caso di Blogger non ci resta che selezionare e copiare il codice 

codice-reembed

da incollare subito sopra alla riga </head> andando su Modello > Modifica HTML. reEmbed ha bisogno di 15 minuti per funzionare secondo quanto riportato nelle istruzioni ma nel mio test la cosa è stata praticamente istantanea a parte il logo del blog che ha impiegato più tempo

reembed-player-video

Sulla destra del player, passandoci sopra con il mouse si visualizzerà l'icona della condivisione che i lettori potranno usare per postare il video su Facebook, Twitter e Google+ oppure per ottenerne il codice embed per implementare il filmato in un'altra pagina web. Leggendo le FAQ si viene a sapere che sono supportati i dispositivi mobili su iOS (iPhone, iPad), Android (Samsung, HTC, ecc) e Windows Phone. Lo script funziona anche con le Playlist. L'unico neo riguarda il link al servizio reEmbed visualizzato in basso a destra che però non sarà più visibile quando inizia la riproduzione del filmato.

Le piattaforme di video sharing supportate sono oltre a Youtube anche DailyMotion e HTML5 video. Dalla Dashboard di reEmbed si possono monitorare anche le statistiche delle visualizzazioni. In seguito sarà implementato anche un meccanismo per implementare degli annunci pubblicitari se non siete già stati accettati come Partner da Youtube. Oltre a Blogger sono supportati anche i siti su Wordpress, Joomla e Drupal oltre a qualsiasi pagina web. Se non avete un sito con reEmbed potete personalizzare il browser (Chrome, Firefox, ecc) in modo da visualizzare i filmati con il player desiderato.


Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy