YouTube API с Foundation Modal

Question

Я пытаюсь показать & autoplay youtube видео в модальном режиме, когда пользователь нажимает на ссылку.

У меня это работает для первого видео, однако последующие видео открывают начальное видео.

Во время отладки я заметил, что предупреждение от идентификатора видеоID столько раз, сколько нажали кнопки с идентификатором предыдущих кнопок. Кажется, это актуально.

<script src="//www.youtube.com/player_api"></script> 
<script> 
function onYouTubePlayerAPIReady() {  
    $('.feature-modal-btn').on('click', function(e){      
     e.preventDefault(); 
     var btn = $(this); 
     //var modal = "#YTMODAL"; 
     var ytVideoID = btn.data('ytvideoid'); 

     $(document).on('opened.fndtn.reveal', '[data-reveal]', function() { 
      alert(ytVideoID); 
      player = new YT.Player('feature-video', { //Add the player       
        width: '800', 
        videoId: ytVideoID, 
        playerVars: { 
         rel   : 0, 
         theme   : 'light', 
         showinfo  : 0, 
         showsearch  : 0, 
         autoplay  : 1, 
         autohide  : 1, 
         modestbranding : 1 
        }, 
        events: { 
        } 
       }); 
     }); 

     $(document).on('close.fndtn.reveal', '[data-reveal]', function() { 
      $('#YTMODAL .flex-video #feature-video').remove(); 
      $('#YTMODAL .flex-video #feature-video iframe').remove(); 
      player = ''; 
      $('#YTMODAL .flex-video').append('<div id="feature-video" />'); 
     });    
    }); 
} 
</script> 

<a href="" class="feature-modal-btn" data-ytvideoid="o_nA1nIT2Ow" data-reveal-id="YTMODAL"> 
<a href="" class="feature-modal-btn" data-ytvideoid="p-iFl4qhBsE" data-reveal-id="YTMODAL"> 

<div id="YTMODAL" class="reveal-modal full" data-reveal > 
    <div class="video-container flex-video widescreen"> 
    <div id="feature-video">[this div will be converted to an iframe]</div> 
    </div> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Я пользуюсь основами модального раскрытия. http://foundation.zurb.com/docs/components/reveal.html

Как я могу настроить свой код, чтобы отображался правильный фильм каждый раз, когда нажимается ссылка?

UPDATE Я создал кодекс, чтобы показать, что происходит. попробуйте открыть & закрытие модальности с использованием одного & две ссылок http://codepen.io/anon/pen/HkoKg

Answer 1

Это было только мне получать мой код запутанно, не что-то конкретное для YT или Reveal рабочей версии в этой ручке

http://codepen.io/anon/pen/HkoKg?editors=101

$(document).foundation(); 
var ytvideoid; 
    $('.feature-modal-btn').on('click', function(e){ 

    ytvideoid = $(this).data('ytvideoid') 

    }); 

$(document).on('opened.fndtn.reveal', '[data-reveal]', function() { 
    var modal = $(this); 
    //console.log(modal); 
    player = new YT.Player('feature-video', { //Add the player       
          width: '800', 
          videoId: ytvideoid, 
          playerVars: { 
           rel   : 0, 
           theme   : 'light', 
           showinfo  : 0, 
           showsearch  : 0, 
           autoplay  : 1, 
           autohide  : 1, 
           modestbranding : 1 
          }, 
          events: { 
          } 
         }); 
}); 

$(document).on('close.fndtn.reveal', '[data-reveal]', function() { 
    $('#YTMODAL .flex-video #feature-video').remove(); 
    $('#YTMODAL .flex-video').append('<div id="feature-video" />'); 
});