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.


<a class="video-thumb-wrapper"
   <img class="video-thumb" width="280" height="200"
        src="//" />


.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.



  1. Hi Phil my name is Maxi from Italy and my english is bad.

    Your play button ccs is “super” and good work.

    But if I remove the trasparency in “.video-thumb” the play button image don’t see.

    I have question for you:

    If I want no trasparency image how I make?


  2. Hey Maxi,

    I like this way because it doesn’t involve adding any additional HTML markup.

    But, you could try something like this, which completely eliminates the need for an arrow graphic.

    .video-thumb-wrapper { position: relative; display: block; width: 280px; height: 200px;
    background: url(‘play.png’) center center no-repeat; }

    .video-thumb-wrapper div { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -25px; border-left: 50px solid #eee; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

    1. It’s a good tool, but doesn’t really help with overlaying play buttons “on-the-fly”.

      If you only have a couple images, great, but if you’re image content is at all dynamic, you’re better off overlaying a play button image.

Leave a Reply

Your email address will not be published. Required fields are marked *