JSFiddle - React, Tailwind, and code Playground
HTML
<button class="play">Play Video</button>
<button class="pause">Pause Video</button>
<iframe class="test_video" id="iframe_video2" src="https://player.vimeo.com/video/113778752?byline=0&portrait=0&title=0&autoplay=0&badge=0&api=1&player_id=iframe_video2" />
JavaScript
var play = document.querySelector('.play'),
pause = document.querySelector('.pause'),
$player = document.getElementById('iframe_video2');
play.addEventListener('click', function () {
// You don't HAVE to JSON.stringify the message itself, but sometimes postMessage is finicky with older browsers
$player.contentWindow.postMessage({
'method': 'play'
}, $player.src);
});
pause.addEventListener('click', function () {
$player.contentWindow.postMessage({
'method': 'pause'
}, $player.src);
});