I managed to play a vimeo video with an external play button with this code
<div class="myvimeo_container">
<iframe id="vimeovid1" src="https://player.vimeo.com/video/vimeoID" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br>
<button onclick="play_video()">MY_PLAY_BUTTON</button>
<script>
function play_video() {
var player = document.getElementById("vimeovid1");
var data = { method: "play" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script></div>
This is working!
But I'm having trouble to add a second button for pausing the video. Is there a way to implement a second
<button onclick="pause_video()">MY_PAUSE_BUTTON</button>
<script>
function play_video() {
var player = document.getElementById("vimeovid1");
var data = { method: "pause" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>
I can't figure this out yet. I just started learning coding and it would be awesome if someone could point me in the right direction.
I'm using the code above in wordpress by the way... to embed a vimeo video... their responsive embedding is not so awesome... so I'm trying to work around a little bit...