Escribir la siguiente estructura dentro del cuerpo del documento HTML:

 <div class="container-border">
   <div class="video-dev">
     <a title="Click Here To Play Video" class="video-a-link" href="http://www.youtube.com"><span class="video-link-span"></span></a>
   </div>
 </div>

 Ahora el código CSS necesario:

<style type="text/css">   
	/*borde contenedor -- no necesario*/
	.container-border {
		border:1px red solid;
		padding:3px;
		width: 111px; height: 157px;;
		margin-top:5px;
		margin-right: 1px;
		float:left;
	}
	 
	/*la imagen de fondo en si*/
	.video-dev {
		cursor:pointer;
		position:relative;
		background:url(rockingvideo.jpg) no-repeat center;
		width: 111px;
		height: 157px;
		left: 0px;
		top: 0px;
	}
	 
	.video-a-link {
		position:relative;
	}
	
	/*por si cursor:pointer no cubre todo --no necesario*/
	a {
		color:#0E58A0;
		width: 111px; height: 157px;
		left: 0px; top: 0px;
		display:block;
	}
	 
	/*imagen soprepuesta, pequeño icono Play*/
	/*en IE no se verá transparente, en el resto si*/
	.video-dev .video-link-span {
		background:transparent url(play_icon.gif) no-repeat scroll 0pt 50%;
		cursor:pointer;
		color:#000000;
		display:block;
		height:35px;
		position:absolute;
		text-align:center;
		text-decoration:none;
		vertical-align:bottom;
		width:34px;
		opacity: 0.8;
		left: 38px;
		top: 68px;
	}
</style>

Muy práctico, pero particularmente encontre un pequeño inconveniente. Definir el tamaño de cada imágen en el código CSS, a menos que todas tengan las misma dimensiones. Pero por supuesto dependerá de cual sea la finalidad de nuestro proyecto. ¿Qué les parece?

Visto en Developer Snippets