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

someoneinomaha 28 css youtube photoshop jquery

在我正在开展的一个项目中,我们正在将我们的媒体团队发布的一堆YouTube视频拉到一个数据库中,以便我们将它们作为相关内容呈现.

我们希望能够做的事情是在生成的YouTube缩略图上叠加一个播放按钮,这样缩略图就代表了一个可以播放的视频.

我正在寻找实现这一目标的最佳方法 - 我已经做了一些搜索,或者没有人对这样做感兴趣,这显然是怎么做的,或者我只是在努力想出正确的搜索条件.

到目前为止我提出的方法是:

  1. 使用具有播放背景图像的容器div并降低缩略图的不透明度以在缩略图上显示播放按钮.我不是这个的忠实粉丝因为额外的div而且它似乎在IE中不起作用.
  2. 批量处理photoshop中的缩略图 - 改变它们,使它们有一个播放按钮.这有点不幸,因为我们每晚都会关闭视频 - 所以有时会有一些没有播放按钮的视频.
  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> 

Robin.. 37

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

我会做那样的事情.无论如何,我认为发布处理图像以添加播放按钮不是一个好主意.如果您需要更改按钮设计怎么办?


如果你想让按钮居中,一个很好的方法是将top和left设置为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;
}


otravers.. 18

一种方法是在没有额外HTML标记的情况下提供很大的灵活性(与人们询问图像叠加时建议的大多数解决方案相反)是使用:afterCSS选择器.假设每个图像周围都有一个"视频"类,例如:

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

为额外的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; 
}