javascript - 在嵌入式 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

这是我能想到的，你可以用图片替换按钮，按钮被禁用，直到视频播放器“准备好”，这需要 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>