在嵌入的vimeo播放器上添加覆盖层 [英] Adding a overlay layer on an embedded vimeo player

问题描述

所以这是嵌入我的网站的视频。
小提琴。

So Here's the video that i'm embedded to my website. Fiddle.

<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

问题是，它很小，播放和其他按钮按钮覆盖了半屏。

因此，有任何方法可以在播放器上添加图层图片，当您点击图片时，视频应该开始播放。

The problem is, it's small and the play and other buttons button covers the half screen.
so is there any way to add a layer image on the player and when you click on the image the video should start playing.

推荐答案

我会为您提供这个解决方案：
http：// jsfiddle .net / yehiaawad / hgtvqatm / 2 /

I would offer you this solution : http://jsfiddle.net/yehiaawad/hgtvqatm/2/

HTML

 <div id="vidFrame" class="play">
<iframe id="vimeo-video" src="http://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
 </iframe>
  <img id="vimeo-id" width="300" height="169" src="" />
  </div>

JAVASCRIPT：

JAVASCRIPT:

callback=?', {format: "json"}, function(data) {
        $("#vimeo-id").attr("src",data[0].thumbnail_large);
});

$("#vimeo-id").on("click",function(){
$(this).fadeOut();
var player=$f($("#vimeo-video")[0]);
 player.api("play");
})

CSS：

#vimeo-id,iframe{
  position:absolute;
}
#vimeo-id{
 cursor:pointer; 
}

这篇关于在嵌入的vimeo播放器上添加覆盖层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！