What's the most convenient way to have a div with a button in the middle that covers a vimeo video? What I want is that the first frame is behind this div, when I press the "div" the video plays. And when I pause the video, the div toggles down on the video again. I'm sorry if I'm not explaining this right. What I want basically is a customized playbutton in the middle of the video. When I press it, the video starts and my playbutton fades out alongs with div...
Not sure how the markup would look like, but I'm guessing something like this:
<div class="video-cover">
<button>Play</button>
<iframe></iframe>
</div>
The video-cover class covers the video, as I press play, it fades out and the video starts.
Your biggest obstacle isn't going to be your markup. To make a custom play/pause button, you need to use Vimeo's JavaScript API. I would suggest reading through this, it explains how to do custom play/pause buttons with their API.
After you have that working, then you can start worrying about your markup.
<div class="video-cover">
<iframe></iframe>
<div class="play">Play</div>
</div>
This markup can work, you need to set the z-index of your iframe low and your play high.