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