Videos de Youtube con Prettyphoto
Publicado el: 01/11/2008 - 21:14Prettyphoto no sólo es el lightbox para jQuery, sino que además es una herramienta perfecta para poder lanzar videos o contenido flash sin tener que realizar otros artificios para validar el código -leáse swfobject.js-.
En la web de Retroback -aún le queda mucho trabajo- estamos usando este maravilloso script (made in jQuery) para lanzar directamente vídeos de Youtube, enlazando directamente al swf. De esta manera nos olvidamos de los problemas al validar código que podrían inducir videos embebidos, aunque tal vez el proceso para enlazarlos sea algo más complejo, pero el resultado final es más bonito.
Como indica el autor en su receta, los videos han de enlazarse de la siguiente forma:
<a href="url" rel="prettyPhoto;width=ancho video;height=alto;flashvars=variables del flash"> enlace </a>
Para los videos de Youtube, necesitamos saber lo de siempre, la url del player asociada a determinado vídeo.
Por ejemplo para insertar el video Daft Bodies - Harder Better Faster Stronger, nos dan el siguiente código:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bl6RJyZdBSU&hl=es&fs=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bl6RJyZdBSU&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Insertamos en el navegador la url http://www.youtube.com/v/bl6RJyZdBSU y llegaremos a una url muy larga con el swf, en este caso:
http://www.youtube.com/swf/l.swf?swf=http%3A//s.ytimg.com/yt/swf/cps-vfl62057.swf&video_id=bl6RJyZdBSU
¡Ya tenemos la fuente! Ahora sólo tenemos que cambiar los & por & (cuestión de validar):
http://www.youtube.com/swf/l.swf?swf=http%3A//s.ytimg.com/yt/swf/cps-vfl62057.swf&video_id=bl6RJyZdBSU
Insertamos la url y jugamos con las variables (dentro de flashvars) autoplay=1, color1=0xffffff y color2=0xffffff para que todo quede bien integrado dentro de las capas de prettyphoto y los vídeos se reproduzcan automáticamente, resultando el enlace final:
<a href="http://www.youtube.com/swf/l.swf?swf=http%3A//s.ytimg.com/yt/swf/cps-vfl62057.swf&video_id=bl6RJyZdBSU" rel="prettyPhoto;width=425;height=344;
flashvars=color1=0xffffff&color2=0xffffff&autoplay=1" title="Video: Daft Bodies - Harder Better Faster Stronger">
enlace </a>
De esta forma, reconozco que algo laboriosa por culpa de Youtube, podremos lanzar vidoes de Youtube sin pasar por <object>, para quienes los odien ;)
Demo en la columna de la derecha.
Edito: ¿Demasiado lio, verdad?, pues mejor así: Prettyphoto y videos de Youtube (método non chapú)
Escribe un comentario
* = campos obligatorios