API YouTube с фундаментальной модальной

Question

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

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

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

<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

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

ОБНОВЛЕНИЕ Я создал codepen, чтобы показать, что происходит. попробуйте открыть и закрыть модалы, используя одну и две ссылки 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" />');
});