在嵌入式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://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; 
} 

Answer 2

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>