very strange. the events don't fire when there is another simple iframe. I removed the iframe - and it worked.
the html with the extra iframe:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Insert title here</title>
</head>
<body>
<iframe id="player_2" src="http://player.vimeo.com/video/XXXXXXX?title=0&byline=0&portrait=0&api=1&player_id=player_2&autoplay=1" width="782" height="413" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe src="/homestuff/googleads/index.html" width="1" height="1" style="border:0;" ></iframe>
<script src="/homestuff/froogaloop.min.js"></script>
<script src="/homestuff/vimeoapi-0905.js"></script>
</body>
</html>
vimeo-0905.js is simple event catcher I copied from playground. works perfectly without iframe:
(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);
}
/**
* Utility function for adding an event. Handles the inconsistencies
* between the W3C method for adding events (addEventListener) and
* IE's (attachEvent).
*/
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent(eventName, callback, false);
}
}
/**
* Called once a vimeo player is loaded and ready to receive
* commands. You can add events and make api calls only after this
* function has been called.
*/
function ready(player_id) {
console.debug('dsadsads');
// 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');
/**
* Sets up the actions for the buttons that will perform simple
* api calls to Froogaloop (play, pause, etc.). These api methods
* are actions performed on the player that take no parameters and
* return no values.
*/
function setupSimpleButtons() {
var buttons = container.querySelector('div .simple'),
playBtn = buttons.querySelector('.play'),
pauseBtn = buttons.querySelector('.pause'),
unloadBtn = buttons.querySelector('.unload');
// Call play when play button clicked
// addEvent(playBtn, 'click', function() {
// froogaloop.api('play');
// }, false);
// Call pause when pause button clicked
addEvent(pauseBtn, 'click', function() {
froogaloop.api('pause');
}, false);
// Call unload when unload button clicked
// addEvent(unloadBtn, 'click', function() {
// froogaloop.api('unload');
// }, false);
}
/**
* Adds listeners for the events that are checked. Adding an event
* through Froogaloop requires the event name and the callback method
* that is called once the event fires.
*/
function setupEventListeners() {
function onPause() {
froogaloop.addEvent('pause', function(data) {
// if (data === 'player_2') $.fancybox.close();
// alert(data);
});
}
function onFinish() {
if (1) {
froogaloop.addEvent('finish', function(data) {
// if (data === 'player_2') $.fancybox.close();
// console.debug('finished');
});
}
else {
froogaloop.removeEvent('finish');
}
}
function onPlayProgress() {
if (1) {
froogaloop.addEvent('playProgress', function(data) {
console.debug(data);
});
}
else {
froogaloop.removeEvent('playProgress');
}
}
window.lastEventHouse = 0.10;
window.lastEventII = 0.1;
// Calls the change event if the option is checked
// (this makes sure the checked events get attached on page load as well as on changed)
onPause();
onFinish();
onPlayProgress();
}
/**
* Sets up actions for adding a new clip window to the page.
*/
function setupAddClip() {
var button = container.querySelector('.addClip'),
newContainer;
addEvent(button, 'click', function(e) {
// Don't do anything if clicking on anything but the button (such as the input field)
if (e.target != this) {
return false;
}
// Gets the index of the current player by simply grabbing the number after the underscore
var currentIndex = parseInt(player_id.split('_')[1]),
clipId = button.querySelector('input').value;
newContainer = resetContainer(container.cloneNode(true), currentIndex+1, clipId);
container.parentNode.appendChild(newContainer);
$f(newContainer.querySelector('iframe')).addEvent('ready', ready);
});
/**
* Resets the duplicate container's information, clearing out anything
* that doesn't pertain to the new clip. It also sets the iframe to
* use the new clip's id as its url.
*/
function resetContainer(element, index, clipId) {
var newHeading = element.querySelector('h2'),
newIframe = element.querySelector('iframe'),
newCheckBoxes = element.querySelectorAll('.listeners input[type="checkbox"]'),
newApiConsole = element.querySelector('.console .output'),
newAddBtn = element.querySelector('.addClip');
// Set the heading text
newHeading.innerText = 'Vimeo Player ' + index;
// Set the correct source of the new clip id
newIframe.src = 'http://player.vimeo.com/video/' + clipId + '?api=1&player_id=player_' + index;
newIframe.id = 'player_' + index;
// Reset all the checkboxes for listeners to be checked on
for (var i = 0, length = newCheckBoxes.length, checkbox; i < length; i++) {
checkbox = newCheckBoxes[i];
checkbox.setAttribute('checked', 'checked');
}
// Clear out the API console
newApiConsole.innerHTML = '';
// Update the clip ID of the add clip button
newAddBtn.querySelector('input').setAttribute('value', clipId);
return element;
}
}
setupEventListeners();
}
})();
I think that the part document.querySelectorAll('iframe') is your problem - you are pretending to the api that all iframes are vimeo. Try picking the player_2 and it should be fine.