Embedding YouTube Videos on website

Mi è capitato più volte di dover incorporare i video YouTube nei siti web, ma in molte occasioni utilizzare il codice di embed per il player youtube ha comportato un problema nella validazione del codice sorgente XHTML.

In questo articolo riprendo il discorso cercando di evidenziare il tipo di embed utilizzato nelle circostanze menzionate sopra e una soluzione diversa che da poco ho cominciato ad adottare. Se avete dei commenti, pro e contro, nella soluzione 2 sotto riportata, come alternativa all'embed, fatemelo sapere.

Il codice standard che utilizzavo prima di studiarne una soluzione nuova era questa:

<invalidTag width="425" height="355"> <param name="movie" value="https://www.youtube.com/v/vR96bTVzx8M?version=3&autohide=1&showinfo=0"> </param> <param name="allowScriptAccess" value="always"></param> <invalidTag src="http://www.youtube.com/v/vR96bTVzx8M?version=3&autohide=1&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" width="425" height="355"></embed> </object>

che viene mostrato in questo modo:

Per ottenere invece lo stesso risultato estetico e funzionale, mantenendo lo standard di validazione XHTML sono arrivato a questa seconda soluzione:

<invalidTag type="application/x-shockwave-flash" width="425" height="350" data="http://www.youtube.com/v/vR96bTVzx8M" title="BlackBerry 9700 Bold"> <param name="movie" value="http://www.youtube.com/v/vR96bTVzx8M" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="Menu" value="0" /> <param name="WMode" value="Transparent" /> <param name="swliveconnect" value="true" /> </object>

che da luogo a questa visualizzazione:

Il risultato , da i test che ho fatto, sono identici e non presenta problemi con i vari Browser. La compatibilità XHTML è mantenuta.

Aggiungo, per chi volesse ottenere una più accurata personalizzazione del player incorporato youtube, su Google Code sono presenti moltissimi parametri e relativa documentazione.

Google Code: youtube player parameters

I parametri più interessanti sono i seguenti, di cui riporto una sintesi:

• autoplay Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
• border Values: 0 or 1. Default is 0. Setting to 1 enables a border around the entire video player. The border's primary color can be set via the color1 parameter, and a secondary color can be set by the color2 parameter.
• controls Values: 0 or 1. Default is 1. This parameter indicates whether the video player controls will display. If this parameter is set to 0, then the player controls will not display, causing the player to look like the chromeless player.
• fs Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button in the embedded player and does not affect the chromeless player. The fullscreen option will not work if you load the YouTube player into another SWF. Note that you must include some extra arguments to your embed code for this to work.
• attenzione: necessita di questo per essere attivato:
• hd Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default. This has no effect on the Chromeless Player. This also has no effect if an HD version of the video is not available. If you enable this option, keep in mind that users with a slower connection may have an sub-optimal experience unless they turn off HD. You should ensure your player is large enough to display the video in its native resolution.
• showinfo Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and uploader before the video starts playing.

Se trovate maggiori info o riscontrate delle incompatibilità, scrivetemi.