How to overlay a play button over a YouTube thumbnail image

Question

In a project I'm working on, we're pulling over a bunch of YouTube videos that our media team has published into a database so we can present them as related content.

Something we'd like to be able to do is overlay a play button on top of the generated YouTube thumbnails so it's more obvious that the thumbnail represents a video that can be played.

I'm looking for the best way to accomplish this - I've done some searching and either no one is interested in doing this, it's really obvious how to do it or I'm just struggling to come up with the right search terms.

The ways I've come up with so far are:

1. Use a container div that has a play background image and lower the opacity of the thumbnail to display the play button over the thumbnail. I'm not a huge fan of this because of the extra div and it doesn't seem to work in IE.
2. Batch process the thumbnails in photoshop - altering them so they have a play button. This would be somewhat unfortunate because we're pulling down videos every night - so sometime there would be some videos without play buttons.
3. Modify the import process to dynamically generate new thumbnails with the play button. This would fix both of the above issues, but would be more difficult to do.

I was hoping to be able to just add a class to the image and use javascript and/or CSS to overlay the image.

If anyone has some advice on this, I'd really appreciate it.

Current html (posted by OP in comments):

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

Answer 1

<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;
}

I would do something like that. In any case, I don't think it's a good idea to post process the images to add the play button. What if you need to change the button design for instance?

---

If you want to center the button, a nice way to do it is to set top and left to 50%, and then adding negative margins equal to half of the size of the button:

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

Answer 2

One way to do it that provides a lot of flexibility without extra HTML markup (contrarily to most solutions suggested when people ask about image overlays) is using the :after CSS selector. Assuming there's a div of the "video" class around each image, something like:

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

Edit the values for width, height, and z-index as needed depending on the rest of your stylesheet. This works well without interfering with other code you might have, such as a div used to hold a caption.

Add a hover selector for extra snazz:

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

Answer 3

You can also use a service

http://halgatewood.com/youtube/

Like this: http://halgatewood.com/youtube/i/youtube_id.jpg (redirects to amazon)

For example: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg (redirects to amazon)

Edit:

the service was taken down, guess too many people bombarded him :) now it is on github

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ (link broken) https://github.com/halgatewood/youtube-thumbnail-enhancer

Here is another service that does the same thing (as suggested by muktesh patel):

http://www.giikers.com/iwc

Answer 4

Short, clean, fully responsive, without extra HTML:

<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;
}

PS: You may even make play icon size responsive (depending on the size of the thumbnail) by adding background-size to the .youtube:before styles.

For example:

.youtube:before {
    background-size: 30%;
}