在嵌入式 vimeo 播放器上添加覆盖层

Question

这是我嵌入到我的网站的视频。 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>

问题是，它很小，播放和其他按钮按钮覆盖了半个屏幕。
有什么方法可以在播放器上添加图层图像，当您单击图像时，视频应该开始播放。

Answer 1

http://codepen.io/anon/pen/grPeyq

这是我能想到的，你可以用图片替换按钮，按钮在视频播放器 "ready" 之前处于禁用状态，这需要 jquery 2.1.4

$(function() {
  document.getElementById("playbutton").disabled = true;
  var player = $('iframe');
  var playerOrigin = '*';
  // Listen for messages from the player
  if (window.addEventListener) {
    window.addEventListener('message', onMessageReceived, false);
  } else {
    window.attachEvent('onmessage', onMessageReceived, false);
  }

  function onMessageReceived(event) {
    var data = JSON.parse(event.data);
    console.log(data.event);
    if (data.event === "ready") {
      //attach ready function to the image
      document.getElementById("playbutton").disabled = false;
      
      $('#playbutton').click(function() {
        player[0].contentWindow.postMessage({
          "method": "play"
        }, playerOrigin);
        $(this).remove();
      });

    }
  }
});

#container {
    position: relative
}

<div id="container">
<button style ="position:absolute; top:0; left:0;width: 300px;height:169px" id="playbutton">
    Play
</button>
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0&api=1" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
</div>

Answer 2

我会为您提供这个解决方案： 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:

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 播放器上添加覆盖层

Adding a overlay layer on an embedded vimeo player

html

javascript

css

vimeo