Primi passi con HTML - Lezione 7 - Tag object. Inserire un video da YouTube.

Molto spesso è necessario inserire un video da YouTube nel proprio blog. In questa lezione vedremo quali tag e attributi vengono utilizzati. Per cominciare, entriamo su YouTube e copiamo il codice del video.

Abbiamo ottenuto questo codice:

<object style="height: 390px; width: 640px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

Come avrai notato, per incorporare un video si utilizza il tag <object>. Questo tag può avere anche l’attributo style. L’attributo style è universale per tutti i tag e serve per scrivere gli stili CSS direttamente nel tag. Cos’è il CSS lo vedremo più avanti, ma per ora ci basta sapere questo. Gli stili CSS all’interno dell’attributo si scrivono separandoli con il punto e virgola. Qui abbiamo height e width, cioè altezza e larghezza, che possiamo modificare. Ad esempio, se scriviamo:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>

la dimensione del lettore YouTube sarà ridotta della metà. Dovremo quindi modificare anche l’altezza e la larghezza del tag embed, che sono definite dagli attributi width e height:

<object style="height: 195px; width: 320px">
  <param name="movie" value="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage">
  <param name="allowFullScreen" value="true">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.youtube.com/v/eyl6mLL6jXQ?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="320" height="180">
</object>

Nel tag object sono inclusi anche i tag <param>. In questi vengono definiti i parametri dell’oggetto incorporato. Tra i principali parametri:

movie – indica che si tratta di un video, e nell’attributo value è specificato l’URL del video.

allowFullScreen – consente di passare alla modalità schermo intero. Impostando value="false" si disattiva la possibilità di visualizzare il video a schermo intero.

allowScriptAccess – serve per permettere l’interazione con l’API del lettore.