Añadiendo vídeos con Lytebox

Con Explorer esta idea de mostrar los vídeos en ventana modal con Lytebox no funciona, sin embargo con Firefox el resultado es genial.
Ahí quedan las explicaciones por si son útiles en algún momento

Son varias las preguntas sobre la forma de presentar los vídeos.

Utilizo Lytebox un script que nos permite mostrar contenido en ventana modal. No es necesario añadir otros scripts y ese es el principal motivo por el que resulta más rápida la carga del blog.

Sus funciones parecen muy básicas y en realidad lo son, lo podemos usar en cualquier enlace, imagen, grupos de imágenes, slideshow, incluso añadir un iframe.La imposibilidad de mostrar vídeos es el punto negativo de Lytebox.

Con esa limitación y todo decidí añadir Lytebox y después con más calma averiguar la forma de mostrar vídeos aunque poco había que averiguar porque leyendo atentamente mi propia entrada llegué al punto donde decía "La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog" pensé que si se puede mostrar página s también podía mostrarse vídeos.

Para añadir un iframe lo haríamos así:
<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Para escoger el tamaño que mostrará el vídeo le añadimos ancho y alto:
<a href="iframe-único" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

En title añadimos el texto que aparece en la parte inferior a modo de título.
» Con width añadimos anchura y con height altura.
» Donde "texto o imagen" es el sitio donde añadimos la imagen que se muestra en caso de no desear texto.
» Añadimos una imagen con <img src="url-de-la-imagen">

Lo siguiente sería la url del vídeo que vamos a mostrar, en este caso lo que haremos será obtener el código del vídeo que You Tube nos proporciona algo así:

<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/wRKPcx9Cpe8&hl=es&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/wRKPcx9Cpe8&hl=es&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>

De todo ese código lo único que vamos a necesitar es lo marcado en negrita.
http://www.youtube.com/v/wRKPcx9Cpe8

Quedaría algo así:
<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

Y lo veríamos así:
texto o imagen

Si en lugar de texto deseamos una imagen sustituimos el texto por <img src="url-de-la-imagen"> puede ser cualquier imagen pero yo quería lo más parecido a un vídeo. La única solución que encontré es la siguiente...

En un blog de pruebas añadimos el código del vídeo, una vez lo visualizamos en el blog hacemos una captura y esa será la imagen que mostraremos.

Imagen

Subimos esa imagen a Blogger, copiamos la url y la añadimos sustituyendo el texto de "texto o imagen" puede parecer demasiado laborioso pero el único paso que requiere mostrar el vídeo con este aspecto es la captura para conseguir la imagen.

Si no deseamos hacer captura lo podemos hacer con cualquier otra imagen que tengamos en nuestro PC.

Ejemplo con captura

Recién sacada del horno tenemos una opción más, es una aportación de J.Miur y sugiere obtener 4 posibles imágenes con la misma url del vídeo, ahorrando de esta forma tomar una captura.

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

http://img.youtube.com/vi/wRKPcx9Cpe8/0.jpg

300x240

http://img.youtube.com/vi/wRKPcx9Cpe8/1.jpg

125x100

http://img.youtube.com/vi/wRKPcx9Cpe8/2.jpg

125x100

http://img.youtube.com/vi/wRKPcx9Cpe8/3.jpg

125x100

<a href="http://www.youtube.com/v/wRKPcx9Cpe8" rel="lyteframe" title="Título"rev="width: 300px; height: 240px; scrolling: no;"><img src="http://img.youtube.com/vi/wRKPcx9Cpe8/0.jpg" /></a>