如何在YouTube缩略图上叠加播放按钮 [英] How to overlay a play button over a YouTube thumbnail image

问题描述

在我正在进行的一个项目中，我们将一大堆YouTube视频发布到数据库中，以便我们的媒体团队能够将其作为相关内容展示。

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.

我正在寻找最好的方法来完成这个 - 我做了一些搜索，没有人有兴趣这样做，这是非常明显的如何做或者我只是努力想出正确的搜索字词。

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:

1. 容器div，其具有播放背景图像并降低缩略图的不透明度以在缩略图上显示播放按钮。我不是这个的一个巨大的粉丝，因为额外的div，它似乎不工作在IE。


2. 批量处理在photoshop的缩略图，改变他们，所以他们有一个play按钮。


3. 修改导入过程以使用播放按钮动态生成新的缩略图，因为我们每天晚上都会下载视频，所以有时候会有一些视频没有播放按钮。 。这将解决上述两个问题，但是更难做到。

我希望能够添加类映射到图像，并使用javascript和/或CSS覆盖图像。

I was hoping to be able to just add a class to the image and use javascript and/or CSS to overlay the image.

如果有人对此有任何建议，我会非常感激。

If anyone has some advice on this, I'd really appreciate it.

目前的html OP in comments）：

Current html (posted by OP in comments):

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

推荐答案

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

我会这样做。在任何情况下，我不认为这是一个好主意，后处理图像添加播放按钮。如果您需要更改按钮设计，例如如何？

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?

如果要将按钮居中，它是设置顶部和左边50％，然后添加负边距等于按钮大小的一半：

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:

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

这篇关于如何在YouTube缩略图上叠加播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！