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

Question

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

jquerycssyoutubephotoshop

30

在我正在处理的一个项目中，我们正在将媒体团队发布的许多YouTube视频导入数据库，以便我们可以将它们作为相关内容呈现出来。

我们希望能够在生成的YouTube缩略图上覆盖一个播放按钮，这样更容易看出缩略图代表一个可以播放的视频。

我正在寻找最佳方法来实现这一点。我已经搜索了一些方法，但要么没有人感兴趣做这个，要么如何做这个非常明显，要么我只是无法想出正确的搜索词。

到目前为止，我想到的方法有：

1.使用具有播放背景图像的容器div，并降低缩略图的不透明度，以显示位于缩略图上方的播放按钮。我不太喜欢这个方法，因为它需要额外的div，而且似乎在IE中无法正常工作。 2.批量处理缩略图 - 修改它们以包含播放按钮。这可能有些不幸，因为我们每晚都会下载视频 - 所以有时会有一些没有播放按钮的视频。 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>

- someoneinomaha

刚刚发现了这篇文章 - 可能与我上面提到的第一个想法类似的解决方案：https://dev59.com/T3RA5IYBdhLWcg3w6SRH - someoneinomaha

2

你目前用的是什么标记来显示缩略图？ - ajcw

这取决于网站的位置，但以下是一个示例：<li><a class="youtube" title="{ video id here }" href="http://www.youtube.com/watch?v={video id here}"><img src="http://i3.ytimg.com/vi/{ video id here }/default.jpg" alt="{ video title here }" /></a><br /><a class="youtube" title="{vide id here }" href="http://www.youtube.com/watch?v={ video id here }">{ video title here </a>}</li> - someoneinomaha

抱歉上面拼错了“you're”！无法编辑掉它 ;o) - ajcw

5个回答

20

当人们询问关于图像覆盖的解决方案时，大多数建议需要额外的HTML标记，但提供了很多灵活性的一种方法是使用:after CSS选择器。假设每个图像周围都有一个“video”类的

标签，则可以像这样：

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

- otravers

顶级解决方案。非常感谢。 - Adam Studenic

邮件中的HTML不起作用，因为Gmail和Yahoo不支持“position: absolute;”。你有任何替代解决方案的想法吗？ - Naveen

6

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

例如：

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

- Dima L.

只是一个提示：如果您正在使用最后一个建议并使图标大小响应-请确保background-size在背景声明之后。 - codeR developR

5

您也可以使用服务

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

- Timo Huovinen

1

链接重定向到亚马逊。 - Tomas K

将http://www.get-youtube-thumbnail.com/的输出放入http://www.giikers.com/iwc中。 - Tim Abell

0

可以使用Unicode 25B6 - BLACK RIGHT-POINTING TRIANGLE，而不是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播放按钮的解决方案

- Atara

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robin · Accepted Answer

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