無法通過關閉停止/暫停嵌入的YouTube視頻（youtube api）在燈箱內

Question

我正在製作燈箱，用戶可以在其中觀看視頻。
問題如果我通過點擊容器外部來關閉它，我會得到錯誤「Can not read property'stopVideo'of undefined」，但如果我用按鈕關閉它，它會很好地工作。

 

    $(function(){ 
     var appendthis = ("look over jsfiddle"); 
     $('a[data-modal-id]').click(function(e) { 
     $(window).resize(); 
     e.preventDefault(); 
     $("body").append(appendthis); 
     $(".modal-overlay").fadeTo(500, 0.7); 
     var modalBox = $(this).attr('data-modal-id'); 
     $('#'+modalBox).fadeIn($(this).data()); 

     $(".js-modal-close-vid, .modal-overlay").click(function() { 
      var player = $(this).closest('.modal-box').data('player'); 
      player.stopVideo(); 
       $(".modal-box, .modal-overlay").fadeOut(500, function() { 
       $(".modal-overlay").remove(); 
       }); 
     }); 

    }); 

的jsfiddle的評論。

Answer 1

$(".js-modal-close, .modal-overlay").click(function() { 
    var player = $('.modal-box').data('player'); 
    player.stopVideo(); 
    player.seekTo(0); 
    $(".modal-box, .modal-overlay").fadeOut(500, function() { 
    $(".modal-overlay").remove(); 
    }); 
}); 

的變化正在改變$(this).closest('.modal-box').data('player');到$('.modal-box').data('player')和它的作品。我認爲這裏的問題是不正確的使用closest方法和選擇器不是你所期望的。

http://jsfiddle.net/4f5dksj5/6/