I am developing a Google Map interface where all video are included in Wordpress posts and appended to Marker. The interface includes also "4 div container" preloaded right above the map, and when I click on a Marker, Jquery Ajax load the video inside the div corresponding to the same class. I need the "div container"fading out when the relative video is ended.
As I am dealing with multiple iframes non generated by JS, I am trying to implement the solution proposed by RobW at YouTube API Target (multiple) existing iframe(s)
However, I am experiencing a strange behavior. The function assigned onStateChange never works when I load the first player, and it starts giving some feedbacks when I fire the second.
I really can't get the reason, but I may be wrong in the way I integrated the script. I preload the first part of RobW script on a separated .js file, and later I set up the YT_ready(function() inside my Ajax call as following:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var destinationWin = $('#'+locations[i].meta);
destinationWin.html("loading...");
destinationWin.load('?action=ajax_post&id='+ locations[i].addre);
YT_ready(function() {
$("iframe[id]").each(function() {
var identifier = this.id;
var frameID = getFrameID(identifier);
if (frameID) { //If the frame exists
players[frameID] = new YT.Player(frameID, {
events: {
"onStateChange": function(event){
if(event.data == 0 ){
console.log("ENDED");
}
}
}
});
}
});
});
}
})(marker, i));
}
}
You can check on your console the result of this by visiting http://testmap.byethost9.com/ The PinkFish are google markers and they are indeed to load videos in one of the four red frame. Any comments / help would be very appreciated.