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