jQuery 如何在 YouTube 缩略图上叠加播放按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5123489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay a play button over a YouTube thumbnail image
提问by someoneinomaha
In a project I'm working on, we're pulling over a bunch of YouTube videos that our media team has published into a database so we can present them as related content.
在我正在进行的一个项目中，我们将媒体团队发布的一系列 YouTube 视频提取到数据库中，以便我们可以将它们显示为相关内容。
Something we'd like to be able to do is overlay a play button on top of the generated YouTube thumbnails so it's more obvious that the thumbnail represents a video that can be played.
我们希望能够做的是在生成的 YouTube 缩略图上叠加一个播放按钮，这样缩略图代表可以播放的视频更加明显。
I'm looking for the best way to accomplish this - I've done some searching and either no one is interested in doing this, it's really obvious how to do it or I'm just struggling to come up with the right search terms.
我正在寻找实现这一目标的最佳方法 - 我已经进行了一些搜索，但要么没有人对此感兴趣，要么很明显该怎么做，要么我只是在努力想出正确的搜索词。
The ways I've come up with so far are:
到目前为止，我想出的方法是：
- Use a container div that has a play background image and lower the opacity of the thumbnail to display the play button over the thumbnail. I'm not a huge fan of this because of the extra div and it doesn't seem to work in IE.
- Batch process the thumbnails in photoshop - altering them so they have a play button. This would be somewhat unfortunate because we're pulling down videos every night - so sometime there would be some videos without play buttons.
- Modify the import process to dynamically generate new thumbnails with the play button. This would fix both of the above issues, but would be more difficult to do.
- 使用具有播放背景图像的容器 div 并降低缩略图的不透明度以在缩略图上显示播放按钮。由于额外的 div，我不是这个的忠实粉丝，而且它似乎在 IE 中不起作用。
- 在 photoshop 中批量处理缩略图 - 改变它们以便它们有一个播放按钮。这有点不幸，因为我们每晚都在下拉视频 - 所以有时会有一些没有播放按钮的视频。
- 修改导入过程以使用播放按钮动态生成新缩略图。这将解决上述两个问题，但会更难做到。
I was hoping to be able to just add a class to the image and use javascript and/or CSS to overlay the image.
我希望能够为图像添加一个类并使用 javascript 和/或 CSS 来覆盖图像。
If anyone has some advice on this, I'd really appreciate it.
如果有人对此有一些建议，我将不胜感激。
Current html (posted by OP in comments):
当前 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>
回答by Robin
<div class="video">
<img src="thumbnail..." />
<a href="#">link to video</a>
</div>
css
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;
}
I would do something like that. In any case, I don't think it's a good idea to post process the images to add the play button. What if you need to change the button design for instance?
我会做类似的事情。无论如何，我认为对图像进行后期处理以添加播放按钮并不是一个好主意。例如，如果您需要更改按钮设计怎么办？
If you want to center the button, a nice way to do it is to set top and left to 50%, and then adding negative margins equal to half of the size of the button:
如果要使按钮居中，一个不错的方法是将顶部和左侧设置为 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;
}
回答by otravers
One way to do it that provides a lot of flexibility without extra HTML markup (contrarily to most solutions suggested when people ask about image overlays) is using the :afterCSS selector. Assuming there's a div of the "video" class around each image, something like:
一种无需额外 HTML 标记即可提供很大灵活性的方法（与人们询问图像叠加时建议的大多数解决方案相反）是使用:afterCSS 选择器。假设每个图像周围都有一个“视频”类的 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;
}
Edit the values for width, height, and z-indexas needed depending on the rest of your stylesheet. This works well without interfering with other code you might have, such as a div used to hold a caption.
编辑的价值观width，height以及z-index根据需要根据您的样式表的其余部分。这很有效，不会干扰您可能拥有的其他代码，例如用于保存标题的 div。
Add a hover selector for extra 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;
}
回答by Timo Huovinen
You can also use a service
您还可以使用服务
http://halgatewood.com/youtube/
http://halgatewood.com/youtube/
Like this: http://halgatewood.com/youtube/i/youtube_id.jpg(redirects to amazon)
像这样：http: //halgatewood.com/youtube/i/youtube_id.jpg（重定向到亚马逊）
For example: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg(redirects to amazon)
例如：http: //halgatewood.com/youtube/i/aIgY20n3n0Y.jpg（重定向到亚马逊）
Edit:
编辑：
the service was taken down, guess too many people bombarded him :) now it is on github
服务被取消了，估计有太多人轰炸了他:) 现在它在 github 上
https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/(link broken) https://github.com/halgatewood/youtube-thumbnail-enhancer
https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/（链接断开） https://github.com/halgatewood/youtube-thumbnail-enhancer
Here is another service that does the same thing (as suggested by muktesh patel):
这是另一个做同样事情的服务（如 muktesh patel 所建议的）：
回答by Dima L.
Short, clean, fully responsive, without extra HTML:
简短、干净、完全响应，没有额外的 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:
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: You may even make play icon size responsive (depending on the size of the thumbnail) by adding background-sizeto the .youtube:beforestyles.
PS：您甚至可以通过添加样式background-size来使播放图标大小响应（取决于缩略图的大小）.youtube:before。
For example:
例如：
.youtube:before {
background-size: 30%;
}
