1

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.

Community
  • 1
  • 1

0 Answers0