JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.pacsoft.com/froogaloop/froogaloop.js"></script>
<div class="container">
<div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" width="540" height="304" frameborder="0"></iframe>
<button class="seek">Seek 30</button>
</div>
</div>
JavaScript
(function(){
// Listen for the ready event for any vimeo video players on the page
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
function apiLog(message) {
apiConsole.innerHTML = message + '\n' + apiConsole.innerHTML;
}
function loadMiddle() {
froogaloop.api('seekTo', 63);
}
function setupModifierButtons() {
var buttons = container.querySelector('div'),
seekBtn = buttons.querySelector('.seek');
// Call seekTo when seek button clicked
addEvent(seekBtn, 'click', function(e) {
froogaloop.api('play');
setTimeout( loadMiddle, 500);
}, false);
}
setupModifierButtons();
apiLog(player_id + ' ready!');
}
})();