Play button on video thumbnails

Here’s a quick method to add a play button to video thumbnails. This is useful when you generate dynamic thumbnails for videos, or grab them from a video hosting service, in this case, YouTube.

The HTML

<a class="video-thumb-wrapper"
   href="//www.youtube.com/embed/myk22AuwizE">
   <img class="video-thumb" width="280" height="200"
        src="//img.youtube.com/vi/myk22AuwizE/0.jpg" />
</a>

The CSS

.video-thumb-wrapper { display: block; width: 280px; height: 200px; 
                       background: url('/img/play.png') center center no-repeat; }
.video-thumb { filter: alpha(opacity = 40); opacity: .4; }

/* set width and height of the wrapper to the width and height of the thumbnail itself */


 

Add a lightbox to the video-thumb-wrapper class to make it even more functional.