如何在 youtube 图像上显示/添加播放按钮？答案

【问题标题】：How to display/add play button on youtube image?如何在 youtube 图像上显示/添加播放按钮？
【发布时间】：2012-03-16 21:28:47
【问题描述】：

我已经嵌入了来自 youtube 服务器的 youtube 图像，即“http://img.youtube.com/vi/0.jpg”，现在图像中间没有显示播放按钮，因为我们通常看到任何YouTube视频！

我尝试使用以下代码在 youtube 图像上获取图像，但它显示更大的图片，我知道为什么

<a class="fancybox" href="#video">
<img src="/wp-content/themes/mytheme/images/play_button.png" no-repeat width: 0px height:0px; style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) transparent" width="180" height="150"/>

<div id ="video">
// here is my embedded youtube usual code
</div>

两张图片均以 180 x 150 尺寸显示，但这不是我想要的。

我希望 youtube 图像以 180 x 150 大小显示，并且播放按钮图像 (play_button.png) 将以小尺寸显示在 youtube 图像中间。

任何 css 中的线索或 php 中的编码都将是非常有利的。

【问题讨论】：

虽然您可能正在使用 WordPress 构建网站，但这与 WordPress 本身无关。您正在寻找 CSS/布局帮助...您需要将播放按钮 PNG 放置在 YouTube 缩略图的顶部。正如我所说，一个 CSS/HTML 问题。请改为发布到 StackOverflow。

标签： youtube

【解决方案1】：

您也可以使用网络服务

halgatewood 服务被取消了，估计有太多人轰炸他了 :) 现在在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

旧答案：

http://halgatewood.com/youtube/

像这样： http://halgatewood.com/youtube/i/youtube_id.jpg

例如： http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg

【讨论】：

@kleopatra 如果您阅读了问题和答案，您会意识到这是终点答案...这是生成缩略图的服务的链接，我无法提供他们的代码，也无法提供我应该不需要也没有很多人想要它。垃圾邮件投诉前请阅读，谢谢。
阅读不是问题 - 识别是 ;-) 感谢您的提醒

【解决方案2】：

我很容易就解决了。只需创建一个中间带有播放按钮的图像并使环绕透明，然后我将此图像放在 youtube 缩略图图像的顶部。它起作用了，但是视频图像被重新对齐，但看起来还不错。

<a class="fancybox" href="#bizgenevideo">
<img src="/wp-content/themes/mytheme/images/play-button.png" style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) " width="180" height="148"/>

【讨论】：

它并不完美，但它很快，我喜欢它！谢谢