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