JSFiddle - React, Tailwind, and code Playground
HTML
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://github.com/vimeo/froogaloop/raw/master/froogaloop.min.js" type="text/javascript"></script>
JavaScript
var VimeoEmbed = {};
//Called on document ready
VimeoEmbed.init = function(e) {
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe) {
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
//EVENT CALLBACKS
/*
* Called when the player finishes loading. The JavaScript API is only available
* after this event fires.
*
* @param player_id (String): ID of the iframe which has finished loading.
*/
VimeoEmbed.vimeo_player_loaded = function(player_id) {
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#' + player_id).get(0));
};
/**
* Adds event listeners for Moogaloop events.
*/
VimeoEmbed.setupAPIEventListeners = function(target) {
target.addEvent('onPlay', VimeoEmbed.vimeo_on_play);
target.addEvent('onPause', VimeoEmbed.vimeo_on_pause);
};
//API EVENTS
VimeoEmbed.vimeo_on_play = function(player_id) {
alert('playing');
};
VimeoEmbed.vimeo_on_pause = function(player_id) {
alert('paused');
};
//On document ready
$(document).ready(VimeoEmbed.init);