javascript - YouTube API 与 Foundation Modal

Question

我正在尝试在用户单击链接时以模式显示并自动播放 YouTube 视频。

我在第一个视频中使用了此功能，但是后续视频会打开初始视频。

在调试过程中，我注意到 videoID 的警报频率与之前按钮的 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

如何调整我的代码，以便每次单击链接时都显示正确的电影？

更新我创建了一个 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" />');
});