Premiers pas en HTML - Leçon 7 - La balise object. Insertion de vidéos Youtube.

Souvent, on a besoin d’insérer une vidéo YouTube dans son blog. Dans cette leçon, nous verrons quelles balises et quels attributs sont utilisés. Commençons par aller sur YouTube et copier le code de la vidéo.

On obtient ce code :

<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>

Comme vous l’aurez remarqué, on utilise la balise <object> pour insérer la vidéo. Cette balise a aussi un attribut style. Cet attribut est universel et permet d’écrire des styles CSS pour la balise. Nous verrons ce qu’est le CSS plus tard, pour l’instant, ce qui importe c’est que les styles CSS s’écrivent dans cet attribut avec des points-virgules. Ici, on a height (hauteur) et width (largeur), ce sont les paramètres que l’on peut modifier. Par exemple, si on écrit :

<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>

Alors la taille du lecteur YouTube sera réduite de moitié. Il faut aussi modifier la hauteur et la largeur dans la balise <embed> via ses attributs width et 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>

Dans la balise <object>, on trouve aussi des balises <param>. Elles définissent les propriétés de l’objet inséré. Parmi ces paramètres :

movie — indique qu’il s’agit d’une vidéo, avec l’URL du clip dans l’attribut value.

allowFullScreen — autorise le mode plein écran, on peut mettre value="false" pour interdire ce mode.

allowScriptAccess — nécessaire pour l’utilisation de l’API du lecteur.