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

Question

在我正在开展的一个项目中,我们正在将我们的媒体团队发布的一堆YouTube视频拉到一个数据库中,以便我们将它们作为相关内容呈现.

我们希望能够做的事情是在生成的YouTube缩略图上叠加一个播放按钮,这样缩略图就代表了一个可以播放的视频.

我正在寻找实现这一目标的最佳方法 - 我已经做了一些搜索,或者没有人对这样做感兴趣,这显然是怎么做的,或者我只是在努力想出正确的搜索条件.

到目前为止我提出的方法是:

1. 使用具有播放背景图像的容器div并降低缩略图的不透明度以在缩略图上显示播放按钮.我不是这个的忠实粉丝因为额外的div而且它似乎在IE中不起作用.
2. 批量处理photoshop中的缩略图 - 改变它们,使它们有一个播放按钮.这有点不幸,因为我们每晚都会关闭视频 - 所以有时会有一些没有播放按钮的视频.
3. 修改导入过程以使用播放按钮动态生成新缩略图.这将解决上述两个问题,但更难做到.

我希望能够只为图像添加一个类,并使用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> 

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

我会做那样的事情.无论如何,我认为发布处理图像以添加播放按钮不是一个好主意.如果您需要更改按钮设计怎么办？

如果你想让按钮居中,一个很好的方法是将top和left设置为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;
}

Answer 2

一种方法是在没有额外HTML标记的情况下提供很大的灵活性(与人们询问图像叠加时建议的大多数解决方案相反)是使用:afterCSS选择器.假设每个图像周围都有一个"视频"类,例如:

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

编辑值width,height以及z-index根据您的样式表的其余部分需要.这很好用而不会干扰您可能拥有的其他代码,例如用于保存标题的div.

为额外的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

简短、干净、完全响应式，没有额外的 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;
}

background-sizePS：您甚至可以通过添加样式来使播放图标大小响应（取决于缩略图的大小）.youtube:before。

例如：

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

Answer 4

您还可以使用服务

http://halgatewood.com/youtube/

像这样：http : //halgatewood.com/youtube/i/youtube_id.jpg（重定向到亚马逊）

例如：http : //halgatewood.com/youtube/i/aIgY20n3n0Y.jpg（重定向到亚马逊）

编辑：

服务被下架了，估计有太多人轰炸他了 :) 现在在 github 上

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/（链接断开） https://github.com/halgatewood/youtube-thumbnail-enhancer

这是另一个做同样事情的服务（如 muktesh patel 所建议的）：

http://www.giikers.com/iwc