unijimpe

Si eres usuario de Youtube debes estar familiarizado con el código para embeber los vídeos en otras paginas web, esta vez les presentamos algunos tips para mostrar los vídeos en iPhone y controlar algunos parámetros adicionales.

URL del Vídeo
Cuando se embeben o incluyes los vídeos de Youtube esto tienen la siguiente estructura, donde ID es el identificador del vídeo el cual lo podemos identificar directamente en el URL de la página que estamos viendo.

http://www.youtube.com/v/ID

Código por defecto de Youtube
Si estas viendo un vídeo de Youtube y deseas incluirlo en tu web el código por defecto será de la forma:

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

Modificando el código para Embeber
Si deseamos que los vídeos de Youtube se interpreten automáticamente en el iPhone, entonces tenemos que hacer la siguiente modificación con lo cual se visualizará correctamente en todos los Browser y en el iPhone/iPod Touch.

<object type="application/x-shockwave-flash" 
width="425" height="344" data="http://www.youtube.com/v/ID">
<param name="src" value="http://www.youtube.com/v/ID" />
<param name="wmode" value="transparent" />
<param name="allowFullScreen" value="true" />
</object>

Agregando Parámetros Adicionales
Con el código anterior, tendremos nuestros vídeos pero estos no se pueden ver en fullscree, se muestran las estrellas para votar por el vídeo, se muestras los vídeos relacionados y hasta un buscador. Pero todo esto lo podemos controlar con los parámetros adicionales de configuración documentados en YouTube Embedded Player Parameters.

• rel (0 ó 1) mostrar los vídeos relacionados.
• autoplay (0 ó 1) reproducir automáticamente el vídeo.
• fs (0 ó 1) mostrar el botón para ver el vídeo en fullscreen.
• hd (0 ó 1) visualizar el vídeo en alta calidad (HQ).
• showsearch (0 ó 1) mostrar/ocultar el buscador de vídeos.
• showinfo(0 ó 1) para mostrar el título y el ranking.
• iv_load_policy (1 ó 3) mostrar/ocultar las anotaciones.

Ejemplo Práctico
Si por ejemplo deseamos incluir un vídeo que tenga la posibilidad que se reproduzca en pantalla completa, y que se oculten el título, ranking y anotaciones entonces el URL del vídeo sería de la forma:

http://www.youtube.com/v/ID&fs=1&showinfo=0&iv_load_policy=1

Entonces si estamos viendo un vídeo en http://www.youtube.com/watch?v=8C7SxYzDNZk, entonces el identificador del vídeo es 8C7SxYzDNZk entonces el cóidgo completo para incluir el vídeo sería de la forma:

<object type="application/x-shockwave-flash" 
width="425" height="344" data="http://www.youtube.com/v/8C7SxYzDNZk&fs=1&showinfo=0&iv_load_policy=1">
<param name="src" value="http://www.youtube.com/v/8C7SxYzDNZk&fs=1&showinfo=0&iv_load_policy=1" />
<param name="wmode" value="transparent" />
<param name="allowFullScreen" value="true" />
</object>

Con lo cual obtendríamos el siguiente resultado.

Plugin para WordPress
Si tienes un blog en WordPress puedes instalar el plugin WP-SWFObject el cual incluirá el código optimizado para iPhone, y te dará un panel de configuración para los parámetros opcionales de los vídeos Youtube, para mayor información puedes visitar WP-SWFObject.

Posts Relacionados

• Insertar Videos de Youtube en WordPress con WP Youtube Player
• Youtube Video Player: tubePlayer 0.6
• WP Youtube Player
• Publicar Videos de Youtube en Flash
• Posicionamiento para Bloggers