3

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.

Zack
  • 471
  • 3
  • 9
  • 22

2 Answers2

3

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>
user2950720
  • 931
  • 2
  • 10
  • 26
  • nice, is there a way to resize the play and other buttons? – Zack Mar 07 '16 at 20:04
  • you can remove the whole overlay adding &background=1 to the iframe parameters, you could then build your own buttons, volume etc the size that you want them (note this setting will set the video to autoloop and mute by default, however this can be added back with javascript) I recommend you checkout the vimeo javascript api – user2950720 Mar 08 '16 at 17:40
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; 
}
Yehia Awad
  • 2,898
  • 1
  • 20
  • 31
  • nice, any way to resize the play and other buttons? – Zack Mar 07 '16 at 20:25
  • @Zack https://developer.vimeo.com/apis/oembed according to Vimeo documentation unfortunately no – Yehia Awad Mar 07 '16 at 20:32
  • btw Check this post http://stackoverflow.com/questions/24971297/how-to-hide-vimeo-controls it might be useful in case if you want to hide the control bar – Yehia Awad Mar 07 '16 at 20:35