在我正在开展的一个项目中，我们正在将一大堆YouTube视频，我们的媒体团队发布到数据库中，以便我们将其作为相关内容。
我们想要做的是覆盖生成的YouTube缩略图之上的播放按钮，因此更明显的是缩略图表示可以播放的视频。
我正在寻找最好的方式来完成这个 – 我已经做了一些搜索，没有人有兴趣这样做，这真的很明显如何做，或者我只是努力找出正确的搜索条件。
到目前为止我已经提出的方法是：
>使用具有播放背景图像的容器div，并降低缩略图的不透明度，以在缩略图上显示播放按钮。我不是一个巨大的粉丝，因为额外的div，它似乎不起作用在IE。
>批量处理photoshop中的缩略图 – 改变它们，让他们有一个播放按钮。这有点不幸，因为我们每天晚上都会拉下视频 – 所以有时候会有一些没有播放按钮的视频。
>修改导入过程，使用播放按钮动态生成新的缩略图。这将解决上述两个问题，但会更加困难。
我希望能够添加一个类到图像，并使用javascript和/或CSS覆盖图像。
如果有人有这方面的建议，我真的很感激。
当前的html(由OP发表在评论中)：
<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;
}
我会做这样的事情。在任何情况下，我不认为发布处理图像以添加播放按钮是一个好主意。如果您需要更改按钮设计，该怎么办？
如果你想要按钮的中心，一个很好的方法是将顶部和左边设置为50％，然后添加等于按钮大小的一半的负边距：
.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;
}