FancyBox和Youtube API事件

Question

我試圖在我播放到我的fancybox中的youtube視頻結束後觸發一個事件。

所以我可以在視頻結束後自動關閉fancybox。

我有最後一個fancybox版本，我在YouTube上API，堅持要例外，但似乎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（你應該使用的fancybox的第2版）：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'); 
    }); 

}