Compago

...free knowledge

 
  • Increase font size
  • Default font size
  • Decrease font size
Home Manuali Programmazione Suggerimenti per inserire un video di youtube in una pagina web

Suggerimenti per inserire un video di youtube in una pagina web

E-mail Stampa PDF

Usare un video su Youtube piuttosto che ospitarlo nel proprio server è una pratica molto usata da chi ha dei limiti di banda per l'hosting e vuole offrire dei contenuti audio o video per i propri utenti.

Molti cms come Joomla e Drupal hanno dei moduli o plugin che aiutano a inserire questo tipo di contenuti nelle proprie pagine web, ma in questo caso l'inserimento diretto tramite codice html nella pagina web offre un maggiore controllo di tutti i parametri e comunque rende più veloce la creazione di contenuti dinamici del vostro sito.

I metodi di inserimento sono fondamentalmente due, quello classico tramite un tag object:

<object width="560" height="315">
<param name="movie"
value="http://www.youtube.com/v/vxINMuOgAu8?version=3&amp;hl=it_IT">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/zD3_D2dGcdY?version=3&amp;hl=it_IT"
type="application/x-shockwave-flash"
width="560"
height="315"
allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>

Oppure tramite un tag iframe, che è il metodo che youtube consiglia ed è anche più coinciso:

<iframe width="560" height="315" 
src="http://www.youtube.com/embed/zD3_D2dGcdY"
frameborder="0" allowfullscreen>
</iframe>

I parametri sono i soliti in entrambi i casi, ovvero la larghezza e l'altezza del video la possibilità di abilitare o meno la modalità "fullscreen" e sopratutto la sorgente, cioè il link contenente il codice relativo al video che volete incorporare:

http://www.youtube.com/embed/8sKZtb-xZkA

Dato che le due forme di inserimento si equivalgono, per semplicità farò riferimento solo a quella di tipo iframe. Di seguito verranno elencate alcune opzioni che potrebbero tornare utili.

Se volessimo usare una connessione protetta (https) per il video basta inserire il link per il video in formato https:

src="/https://www.youtube.com/embed/8sKZtb-xZkA"

Di default quando finisce un video vengono mostrati dei video simili o correlati col vostro, se volete evitarlo nel link dovrete inserire il parametro "rel=0"

src="http://www.youtube.com/embed/8sKZtb-xZkA?rel=0" 

Come gran parte delle proprietà web, YouTube utilizza i cosiddetti cookie per raccogliere informazioni. Un "cookie" può essere utilizzato per memorizzare dati relativi al computer dell'utente o all'utente che sta guardando un video. YouTube si serve dei cookie per mantenere l'integrità delle statistiche sui video, per impedire attività fraudolente e per migliorare l'esperienza sul sito, fra le altre cose.

Ad ogni modo è disponibile la modalità di privacy ottimizzata per il player incorporato. Questa modalità limita la facoltà di YouTube di impostare cookie sul computer di un utente che visualizza una pagina web contenente un video player incorporato di YouTube con privacy ottimizzata ma non fa clic sul video per avviare la riproduzione. YouTube potrà continuare a impostare cookie sul computer del visitatore quando quest'ultimo farà clic sul video player di YouTube, ma non memorizzerà nel cookie informazioni riconducibili alla persona in relazione alle riproduzioni di video incorporati che utilizzano la modalità di privacy ottimizzata.

Per abilitare questa modalità il dominio per il link non sarà più "youtube.com" ma "youtube-nocookie.com":

src="http://www.youtube-nocookie.com/embed/8sKZtb-xZkA"

Per evitare di avere il logo di youtube sul player( in basso  destra ) come ad esempio:

Basta inserire nel link il parametro "modestbranding=1":

src="http://www.youtube.com/embed/8sKZtb-xZkA?modestbranding=1"

con i parametri "theme" e "color" potrete personalizzare meglio il vostro player in modo da adattarlo alla pagina web che lo ospita. Esempio:

src="http://www.youtube.com/embed/8sKZtb-xZkA?theme=light&color=red

Ecco alcuni esempi :

Altro parametro utile per modificare l'aspetto del player è il "border" nel link o il "frameborder" nel tag, il quale può essere impostato ad zero per tenerlo nascosto oppure a uno per mostrarlo.

<iframe 
src="http://www.youtube.com/embed/zD3_D2dGcdY"
width="560" height="315"
frameborder="1">
</iframe>

oppure

<iframe 
src="http://www.youtube.com/embed/zD3_D2dGcdY?border=1"
width="560" height="315">
</iframe> 

Potrete anche decidere se mostrare o nascondere i controlli sul video col parametro "controls" che può avere valore zero (nasconde) oppure uno (mostra).

Un altra opzione degna di nota riguarda la possibilità di impostare l'autoplay del video tramite l'omonimo parametro "autoplay", zero(no autoplay) e uno (autoplay).

Inserire una playlist

Se i video da mostrare fossero più di uno è possibile creare una playlist ed incorporare la playlist stessa. I metodi sono sempre gli stessi :

<object width="480" height="385"> 
   <param name="movie" value="http://www.youtube.com/p/B09A572EB9A3BD01"></param> 
   <param name="allowFullScreen" value="true"></param> 
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/p/ID" width="480" height="385" 
          type="application/x-shockwave-flash" allowscriptaccess="always" 
          allowfullscreen="true">
</embed>
</object>

oppure

<iframe src="http://www.youtube.com/embed/p/B09A572EB9A3BD01" 
        width="100%" height="500" frameborder="0">
</iframe>

oppure (metodo consigliato)

<iframe width="560" height="315" 
src="http://www.youtube.com/embed/videoseries?list=PLB09A572EB9A3BD01"
frameborder="0" allowfullscreen>
</iframe> 

dove il "B09A572EB9A3BD01" è il codice della playlist da inserire.

Inserire un canale

Codice di incorporamento del canale:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml
&up_channel=NomeTuoCanale
&synd=open
&w=320
&h=390
&title=NomeCanale
&border=%23ffffff%7C3px%2C1px+solid+%23999999
&output=js">
</script> 

Il canale incorporato risulterà quindi visibile ai visitatori del tuo sito. Tra i gadgets di Google ve ne sono anche altri che potrebbero aiutarvi a mostrare i video di youtube.
I parametri sono la larghezza (w=320), l'altezza (h=390), il titolo del modulo (title=NomeCanale), il bordo (in formato codificato border=#ffffff|3px,1px solid #999999)  e come sempre il nome del canale da inserire (up_cannel=NomeTuoCanale). Esempio:

Poi se siete bravi e questo gadget non vi soddisfa allora potete costruirvene uno su misura (vedi http://code.google.com/intl/it-IT/apis/gadgets/)

Privacy

Se il video in questione non lo avete caricato voi potreste incorrere nelle limitazioni che il proprietario ha impostato per l'embedding. Se invece siete voi il proprietario sarete voi stessi a poter imporre le regole ad altri che vogliono incorporare il video nei loro siti:

Se siete proprietari del video e avete un account Adsense non dimenticatevi di connettere il vostro account su Youtube con quello in Adsense, in modo da poter guadagnare con la pubblicità.

In conclusione, qualsiasi sia la tua presenza su Internet, un grande sito web, un blog, una pagina di social networking oppure qualsiasi altra cosa, Youtube ti permetterà di portare il tuo sito nella sua community di video aumentando anche le possibilità che il tuo sito sia visitato. Insomma non sarà solo il tuo sito a portare utenti sul video, ma sarà il video stesso a portare utenti al tuo sito.

Per maggiori dettagli e informazioni vi rimando alla documentazione ufficiale del Youtube player.

Ultimo aggiornamento ( Giovedì 24 Novembre 2011 09:16 )  
Loading

Login