Adding a overlay layer on an embedded vimeo player

Question

So Here's the video that i'm embedded to my website. 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>

The problem is, it's small and the play and other buttons button covers the half screen.
so is there any way to add a layer image on the player and when you click on the image the video should start playing.

Answer 1

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

this is what I could come up with, you can replace the button with an image, button is disabled until video player is "ready", this requires 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

I would offer you this solution : 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; 
}