play pause multiple vimeo videos

play pause multiple vimeo videos

I have found a solution to starting/pausing multiple vimeo videos from
seperate buttons, but I would like to use images for the play and pause
buttons.
Can anyone help me ammend the code? I guess I need to replace the html
button code with images and then reference them in the javascript, but I
can't seem to get it to work.
Many thanks.
my html is:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<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>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2"
src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2"
width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
The javascript is:
var VimeoEmbed = {};
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);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded
' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click',
{'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);