Question

在我正在开展的一个项目中，我们正在将我们的媒体团队已发布的一大堆视频拉到数据库中，以便我们将其作为相关内容展示。

我们希望能够做的事情是在生成的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>

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

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

如果你想让按钮居中，一个很好的方法是将顶部和左边设置为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标记（与人们询问图像叠加时建议的大多数解决方案相反）使用:after CSS选择器。假设每个图像周围都有一个“视频”类的div，类似于：

.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

您也可以使用服务

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

Answer 4

简短，干净，完全响应，无需额外的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：您甚至可以通过将background-size添加到.youtube:before样式来使播放图标大小响应（取决于缩略图的大小）。

例如：

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

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

4 个答案:

编辑：