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

Posted 2023-02-16

【中文标题】如何在 YouTube 缩略图上叠加播放按钮

【英文标题】：How to overlay a play button over a YouTube thumbnail image

【发布时间】：2011-07-04 15:43:22

【问题描述】：

在我正在进行的一个项目中，我们将媒体团队已发布到数据库中的大量 YouTube 视频提取出来，以便我们可以将它们作为相关内容呈现。

我们希望能够在生成的 YouTube 缩略图上叠加一个播放按钮，这样缩略图代表可以播放的视频就更明显了。

我正在寻找实现这一目标的最佳方法 - 我已经进行了一些搜索，但要么没有人对此感兴趣，但如何做到这一点非常明显，或者我只是在努力想出正确的方法搜索词。

到目前为止我想出的方法是：

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

我希望能够只为图像添加一个类并使用 javascript 和/或 CSS 来覆盖图像。

如果有人对此有任何建议，我将不胜感激。

当前 html（由 OP 在 cmets 中发布）：

<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" 
                  />
    </a><br /> 
    <a 
        class="youtube" 
        title="vide id here " 
        href="youtube.com/watch?v= video id here ">
              video title here 
    </a>
</li> 

【问题讨论】：

刚发现这篇文章——这可能是一个类似于我上面提到的第一个想法的解决方案：***.com/questions/785458/…

您目前使用什么标记来显示缩略图？

这取决于网站的位置，但这是一个示例： youtube.com/watch?v=video id here ">i3.ytimg.com/vi 视频 id /default.jpg" />youtube.com/watch?v= 此处视频 id "> 此处视频标题

抱歉上面的“you're”拼写错误！无法编辑它；o)

【参考方案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;

【讨论】：

不要忘记position: absolute 的播放按钮。

如果背景图像留在图像后面，我做错了什么？

我为 a-tag 添加了一个 z-index 值，但背景图像留在缩略图后面。

我更改了高度/宽度顶部/左侧值并且它起作用了。感谢大家的帮助。

这正是我所需要的，而且效果很好。谢谢！

【参考方案2】：

使用:after CSS 选择器的一种方法是使用:after CSS 选择器，无需额外的HTML 标记即可提供很大的灵活性（与人们询问图像叠加时建议的大多数解决方案相反）。假设每个图像周围都有一个“视频”类的 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; 

【讨论】：

***解决方案。非常感谢

电子邮件上的 html 不起作用，因为 gmail，雅虎不支持“位置：绝对；” .您对替代解决方案有任何想法吗？

【参考方案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

【讨论】：

链接重定向到亚马逊

将get-youtube-thumbnail.com的输出放入giikers.com/iwc

【参考方案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"  />
</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%;