События API FancyBox и Youtube

Question

Я пытаюсь запустить событие после того, как видео youtube, которое я играю в моем fancybox, закончилось.

Так что я могу закрыть автоматически fancybox после завершения видео.

У меня последняя версия fancybox, и я нахожусь в API-интерфейсе youtube, придерживаясь примеров, но кажется, что объект ytplayer «неопределен», и я не могу заставить его работать правильно.

Я прочитал много питания по Интернету, включая этот, который, кажется, хорошо: How make fancybox auto close when youtube video id done?

Это код, я использую: JsFiddle

$(".fancybox").fancybox({ 
    'openEffect' : 'none', 
    'closeEffect' : 'none', 
    'overlayOpacity' : 0.7, 
    'helpers' : { 
     media : {} 
    }, 
    'afterLoad' : function() { 
     function onYouTubePlayerReady(playerId) { 
      //alert(playerId); 
      //alert(document.getElementById("myytplayer")); 
      ytplayer = document.getElementById("myytplayer"); 
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); 
     } 

     function onytplayerStateChange(newState) { 
      //alert("Player's new state: " + newState); 
      if (newState == 0){ 
       $.fancybox.close(true); 
      } 
     } 
    } 
}); 

// Launch fancyBox on first element 
$(".fancybox").eq(0).trigger('click'); 

Если кто-то получить эту работу , это было бы замечательно ! Я просто видео, чтобы закрыть fancybox после его завершения!

Большое спасибо

Answer 1

Пожалуйста, смотрите следующий рабочий код

jsfiddle (вы должны использовать версии 2 FancyBox.): http://jsfiddle.net/c5h9U/2/

// Fires whenever a player has finished loading 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

// Fires when the player's state changes. 
function onPlayerStateChange(event) { 
    // Go to the next video after the current one is finished playing 
    if (event.data === 0) { 
     $.fancybox.close(); 
    } 
} 

// 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: { 
          'onReady': onPlayerReady, 
          'onStateChange': onPlayerStateChange 
         } 
        }); 
       } 
      }); 
    // Launch fancyBox on first element 
    $(".fancybox").eq(0).trigger('click'); 
    }); 

}