jquery – 如何在YouTube缩略图上叠加播放按钮

在我正在开展的一个项目中，我们正在将一大堆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;
}

原文地址：https://www.jb51.cc/jquery/183591.html