Добавление слоя наложения на встроенном проигрывателе 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>