JSFiddle - React, Tailwind, and code Playground

by Joan Rueda

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<iframe id="vimeo-player" src="//player.vimeo.com/video/76979871" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="play">[PLAY]</div>
<div id="pause">[PAUSE]</div>
<div id="stop">[STOP]</div>

CSS

#play,#pause,#stop{
    width:60px;
    margin:5px;
    text-align: center;
    border: solid;
    cursor:pointer;
}

JavaScript

$('#play').click(function() {
    var iframe = $('#vimeo-player')[0];
    var player = $f(iframe);
    player.api('play');
});
$('#pause').click(function() {
    var iframe = $('#vimeo-player')[0];
    var player = $f(iframe);
    player.api('pause');
});
$('#stop').click(function() {
    var iframe = $('#vimeo-player')[0];
    var player = $f(iframe);
    player.api('unload');
});