Imagen de 'play' sobre miniaturas de YouTube con CSS Estaba mirando algunas características que me parecieron al menos un poco curiosas en los vídeos de YouTube que se muestran en Google+ (Goo...

Imagen de 'play' sobre miniaturas de YouTube con CSS

Estaba mirando algunas características que me parecieron al menos un poco curiosas en los vídeos de YouTube que se muestran en Google+ (Google Plus)
Allí, los videos se muestran con una miniatura del mismo y encima de todo aparece una imagen de play o reproducir. La intención es obvia: el video se cargará recién al hacer clic encima del botón o de la imagen de play.
Lo mismo ocurre con los videos incrustados de YouTube, con un botón en medio "invitando" a reproducirlo.
La idea de este post: Colocar una imagen de 'play' sobre una imagen de fondo (la miniatura de YouTube) y centrarla para simular un botón de "reproducir vídeo".



Procedamos. Primeramente el CSS:
img.youtube {
margin:0;
border:0;

height:46px; /* alto del play */
width:68px; /* ancho del play */

padding:157px 206px; 

/* ---------------------------------------
Explicación del padding de arriba: 
mitad de ancho total menos mitad del play...
Así calculamos:

360/2 = 180 | 46/2 = 23 --> 180-23 = 157
480/2 = 240 | 68/2 = 34 --> 240-34 = 206
-----------------------------------------*/

background:transparent url(URL_Miniatura.jpg) no-repeat center
}

/* ---------------------------------------
Arriba donde dice 'URL_Miniatura.jpg' reemplazamos con la miniatura de YouTube.
-----------------------------------------*/

/* opcional */
img.youtube:hover { 
opacity:0.9;
cursor:pointer
}
A continuación aplicamos el CSS con un poco de HTML:
<img src="imagen_play.png" alt="Texto alternativo" border="0" class="youtube"/>

Versión inline:
<img style="width:68px;height:46px;margin:0;padding:157px 206px; background:transparent url(imagen_miniatura.jpg) no-repeat center;" src="imagen_play.png"/>
La imagen de reproducir vídeo que se posicionará sobre la supuesta miniatura en este ejemplo es ésta y sus dimensiones son 46px de alto por 68px de ancho:
Ejemplo:

Ver más ejemplos(diferentes tamaños con imágenes estáticas)

Para que funcione con miniaturas de YouTube, reemplazar imagen_miniatura.jpg por la URL de la miniatura de YouTube de la siguiente manera:

Si la dirección URL del vídeo es
http://www.youtube.com/watch?v=SRTAAQzKWx8
Reemplazar:
www por img
/watch?v= por /vi/
agregar /hqdefault.jpg
La miniatura del vídeo entonces será:
http://img.youtube.com/vi/SRTAAQzKWx8/hqdefault.jpg
Más información sobre las miniaturas de YouTube puede encontrarse en este enlace

Ahora bien, yo quería que la imagen de play sea similar o igual a la de Google+
Entonces me tomé la libertad de tomar la imagen de 'reproducir' que se usa allí y que es ésta y tiene los 76x76 píxeles (redimensionada un píxel en uno de sus costados para evitar dolores de cabeza al calcular).

Entonces volviendo a hacer cálculos, el CSS queda así:
img.youtube {
margin:0;
border:0;

height:76px; /* alto del play */
width:76px; /* ancho del play */

padding:142px 202px; 

/* ---------------------------------------
El padding de arriba: 
mitad de ancho total menos mitad del play  

360/2 = 180 | 76/2 = 38 --> 180-38 = 142
480/2 = 240 | 76/2 = 38 --> 240-38 = 202
-----------------------------------------*/

background:transparent url(imagen_miniatura.jpg) no-repeat center
}
Versión inline:
<img style="width:76px;height:76px;margin:0;padding:142px 202px; background:transparent url(imagen_miniatura.jpg) no-repeat center;" src="imagen_play.png"/>

Y la miniatura de YouTube que usan en Google+ no es de precisamente de YouTube sino algo como esto:

http://ytimg.googleusercontent.com/vi/WQvbEjk5Ivg/hqdefault.jpg
Y se ve algo parecido a esta imagen:

Ejemplo funcional (al hacer clic encima -estando en la entrada en el blog- se se abrirá una ventana modal con el vídeo)


Eso es todo por el momento. Si es necesario iré actualizando esta entrada (al igual que ocurre con las otras entradas) con lo que vaya descubriendo.

Actualización:
Recientemente vi una entrada en Oloblogger titulada "La ventaja de subir una sola imagen y disponer de cientos" en donde descubrí un truco muy interesante. Utilizando Picasa Web Albums es posible agregar automáticamente una imagen de 'play' sobre cualquier imagen simplemente modificando la dirección URL de la imagen.

Para ello con nuestra cuenta de Google (Gmail/Blogger/YouTube/Orkut, etc) entramos a Picasa en su versión Web (es gratis) y subimos una imagen que represente a al vídeo; puede ser un fotograma del vídeo o elegimos entre las tres miniaturas que YouTube que nos provee en cada vídeo y procedemos a descargarla (la miniatura) a y volver a subirla.

Por ejemplo esta:
http://ytimg.googleusercontent.com/vi/WQvbEjk5Ivg/hqdefault.jpg
Una vez que hayamos subido la imagen y tengamos su URL solamente hay que modificar un poco la misma, justo donde está coloreado:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEqlTvOlEvx-Psq5AK4SkIJF4YDLKSZU5Z-1Wz8-EGhiCxx-VzgOQf4R56QzSV8gnmz64PvtBvFpLH_gxrtzKD4QfygyVGc_emWb6tLpLPydL2z-tkDuv9iae4TXLuNVvcm-TPnyHCeA1K/s1600/hqdefault.jpg
Ese número que está junto a la letra 's' representa el tamaño de la imagen que puede modificarse a nuestro antojo. Hagamos que tenga 400 píxeles de ancho. Entonces quedaría así:
http://lh5.googleusercontent.com/XXXX...ZZZ/s400/hqdefault.jpg
Muy bien, para agregar la imagen de 'play' basta con agregar un '-o' (guion y letra o) al final del número. Entonces tendremos esto:
http://lh5.googleusercontent.com/XXXX...ZZZ/s400-o/hqdefault.jpg
Listo, no hace falta abrirlo con ningún editor de imágenes, ni hacer cálculos, sólo modificamos el tamaño y le agregamos '-o' y ya está, tal como se puede [ver en la imagen].


A propósito de Google+, este es mi perfil --> agregame a tus círculos ;)

Si te gustó deja tu comentario y también comparte esta entrada :)

Ver también: Equivalencias en URLs de Picasa Web Albums: Google, Orkut, Blogger, etc.

¿Te resultó útil? Ver otro post al azar (recomendado)

O usa los siguientes botones para compartir:

3 comentario(s):

Pepe Barrascout Ortiz dijo...

Excelente tutorial, muchas gracias por compartir el conocimiento.

Saludos.

2 Tipos Descuidados dijo...

Cual es el código para darle el efecto de "obscurecer" el resto de la pantalla al darle clic a la imagen y empezar a ver el vídeo ?

Víctor Emanuel Ortiz dijo...

2 Tipos Descuidados:
Yo utilizo una especie de clon de Lightbox, una ventana modal multimedia llamada Shadowbox.js que permite ver no solo imágenes sino también vídeos, flash, sitios web, mapas, galerías y más. Es fácil usar, básicamente sólo hay que agregarle rel="shadowbox" y listo. Por ejemplo: <a href="URL_de_la_imagen" rel="shadowbox" title="Imagen">Imagen</a>. Aunque en el caso de los vídeos hay que agregarle algunos parámetros.

Publicar un comentario

COMENTAR ES GRATIS!

Pero trata de que tu comentario no esté fuera del tema (Off-Topic).
Nada de ataques personales, ni insultos ni críticas destructivas al autor o a otros lectores del blog.
No están permitidos comentarios en MAYÚSCULAS (en internet significa gritar).
Intenta escribir correctamente y no uses lenguaje SMS (usa palabras completas por favor).
Tampoco está permitido el spam en todas sus variantes. Por este motivo los comentarios no serán publicados de manera inmediata sino tras ser filtrados previamente por un moderador.

Muchas gracias por comprender...

Para mostrar tu avatar: edita tu perfil de Blogger antes de comentar.

Nota: Si hay algún link o enlace externo, imagen o vídeo que no funcione correctamente en esta entrada, házmelo saber aquí...