Primeros pasos con HTML – Lección 7 – Etiqueta object. Insertar video de YouTube

Es bastante común insertar un video de YouTube en tu blog. En esta lección veremos qué etiquetas y atributos se utilizan para ello. Primero, vamos a ir a YouTube y copiar el código del video.

Este es el código resultante:

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

Como probablemente ya has notado, para insertar el video se usa la etiqueta <object>. Además, la etiqueta object tiene un atributo style. Este atributo es universal para todas las etiquetas y se usa para aplicar estilos CSS al elemento. Qué es CSS lo veremos más adelante, pero por ahora basta con saber esto. Los estilos CSS dentro del atributo se escriben con punto y coma. Aquí tenemos height y width, es decir, altura y ancho. Estos son los parámetros que podemos cambiar. Por ejemplo, si cambiamos a:

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

Entonces, el tamaño del reproductor de YouTube será la mitad. También es necesario ajustar la altura y el ancho de la etiqueta embed, que están definidos en los atributos width y 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>

La etiqueta object también contiene etiquetas <param>. Las etiquetas param definen propiedades para el objeto insertado. Los parámetros insertados son los siguientes:

movie - indica que este es un video, y en el atributo value se coloca la URL del video.

allowFullScreen - permite la opción de ver en pantalla completa, se puede poner value="false" si no se desea permitir este modo.

allowScriptAccess - necesario para trabajar con la API del reproductor.