如何在 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;
}

我也会做类似的事情。无论如何，我认为对图像进行后期处理以添加播放按钮不是一个好主意。例如，如果您需要更改按钮设计怎么办？

---

如果您想让按钮居中，一个不错的方法是将顶部和左侧设置为 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。

添加悬停选择器以增加额外的时尚感：

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

PS：您甚至可以通过将

background-size

添加到

.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

Answer 5

可以使用 unicode 25B6 - 黑色右指三角形来代替

play_button_image.png

.my-class a::before {
  content: "\25B6";
  position: relative;
  color: white;
  left: 80px;
  top: 90px;
  z-index: 999;
  font-size: 40px;
  opacity: 0.7;
  text-shadow: 0 3px #666666;
}

基于

在视频缩略图上制作CSS播放按钮的解决方案