En un proyecto en el que estoy trabajando, estamos recopilando un montón de videos de YouTube que nuestro equipo de medios ha publicado en una base de datos para que podamos presentarlos como contenido relacionado.
Algo que nos gustaría poder hacer es superponer un botón de reproducción sobre las miniaturas de YouTube generadas para que sea más obvio que la miniatura representa un video que se puede reproducir.
Estoy buscando la mejor manera de lograr esto: he realizado algunas búsquedas y nadie está interesado en hacer esto, es realmente obvio cómo hacerlo o simplemente estoy luchando para encontrar los términos de búsqueda correctos.
Las formas que he encontrado hasta ahora son:
Esperaba poder simplemente agregar una clase a la imagen y usar javascript y/o CSS para superponer la imagen.
Si alguien tiene algún consejo al respecto, se lo agradecería mucho.
HTML actual (publicado por OP en los comentarios):
<li> <a class="youtube" title="{ video id here }" href="youtube.com/watch?v={video id here}"> <img src="i3.ytimg.com/vi{ video id here }/default.jpg" alt="{ video title here }" /> </a><br /> <a class="youtube" title="{vide id here }" href="youtube.com/watch?v={ video id here }"> { video title here } </a> </li><div class="video"> <img src="thumbnail..." /> <a href="#">link to video</a> </div>CSS
.video { position: relative; } .video a { position: absolute; display: block; background: url(url_to_play_button_image.png); height: 40px; width: 40px; top: 20px; left: 20px; }Yo haría algo así. En cualquier caso, no creo que sea una buena idea postprocesar las imágenes para añadir el botón de reproducción. ¿Qué sucede si necesita cambiar el diseño del botón, por ejemplo?
Si desea centrar el botón, una buena manera de hacerlo es configurar la parte superior e izquierda al 50% y luego agregar márgenes negativos iguales a la mitad del tamaño del botón:
.video a { position: absolute; display: block; background: url(url_to_play_button_image.png); height: 40px; width: 40px; top: 50%; left: 50%; margin: -20px 0 0 -20px; }Una forma de hacerlo que brinda mucha flexibilidad sin marcado HTML adicional (al contrario de la mayoría de las soluciones sugeridas cuando las personas preguntan sobre superposiciones de imágenes) es usar el selector :after CSS. Suponiendo que hay un div de la clase "video" alrededor de cada imagen, algo así como:
.video:after { content: ""; position: absolute; top: 0; width: 150px; height: 120px; z-index: 100; background: transparent url(play.png) no-repeat center; pointer-events: none; } Edite los valores de width , height y z-index según sea necesario según el resto de su hoja de estilo. Esto funciona bien sin interferir con otro código que pueda tener, como un div que se usa para contener una leyenda.
Agregue un selector de desplazamiento para obtener más elegancia:
.video:hover:after { content: ""; position: absolute; top: 0; width: 150px; height: 120px; z-index: 100; background: transparent url(play_highlight.png) no-repeat center; pointer-events: none; }Corto, limpio, totalmente receptivo, sin HTML adicional:
<a class="youtube" href="http://youtube.com/watch?v={video id here}"> <img src="http://i3.ytimg.com/vi/{video id here}/default.jpg" alt="{ video title here }" /> </a>CSS:
.youtube { position: relative; display: inline-block; } .youtube:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10; background: transparent url({play icon url here}) center center no-repeat; } PD: Incluso puede hacer que el tamaño del icono de reproducción responda (según el tamaño de la miniatura) agregando background-size a los estilos .youtube:before .
Por ejemplo:
.youtube:before { background-size: 30%; }