I am loading the YouTube player API as follows and I'm trying to fire an event once the youtube video that I'm playing into my fancybox is ended.and show one pop up.
this the code i found and tried but event is not firing
<!doctype html>
<html lang="en">
<body>
<a class="fancybox fancybox.iframe" id="vdo" href="http://www.youtube.com/embed?listType=playlist&list=PL590L5WQmH8f_0qlZ-tKrtbfw4n0jyHQ">Video #1</a>
<script>
// Fires whenever a player has finished loading
function onPlayerReady(event) {
event.target.playVideo();
}
// Fires when the player's state changes.
count = 0;
function onPlayerStateChange(event) {
if(event.data == 0)
{
count++;
}
if(count == 6)
{
$("#popup-wrapper-center").show();
}
}
// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {
// Initialise the fancyBox after the DOM is loaded
$(document).ready(function() {
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : 50,
beforeShow : function() {
// Find the iframe ID
var id = $.fancybox.inner.find('iframe').attr('id');
// Create video player object and add event listeners
var player = new YT.Player(id, {
events: {
'onStateChange': onPlayerStateChange
}
});
}
});
});
}
</script>
</body>
</html>
change the id to video instead of vdo