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.

Tags:

4 Comments

  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?

    Thanks
    Maxi

  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 *