title: YouTube API with Foundation Modal
body: <p>I'm trying to show &amp; autoplay youtube videos in a modal when a user clicks a link. </p>
  
  <p>I have this working for the first video, however subsequent videos open the initial video. </p>
  
  <p>During debugging, I noticed that the alert of the videoID fres as many times as the buttons have been clicked with the ID of the previous buttons.  This seems like it is relevant. </p>
  
  <pre><code>&lt;script src="//www.youtube.com/player_api"&gt;&lt;/script&gt;
  &lt;script&gt;
  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('&lt;div id="feature-video" /&gt;'); 
          });            
      });
  }
  &lt;/script&gt;
  
  &lt;a href="" class="feature-modal-btn" data-ytvideoid="o_nA1nIT2Ow" data-reveal-id="YTMODAL"&gt;
  &lt;a href="" class="feature-modal-btn" data-ytvideoid="p-iFl4qhBsE" data-reveal-id="YTMODAL"&gt;
  
  &lt;div id="YTMODAL" class="reveal-modal full" data-reveal &gt;
    &lt;div class="video-container flex-video widescreen"&gt;
      &lt;div id="feature-video"&gt;[this div will be converted to an iframe]&lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using foundations modal reveal. 
  <a href="http://foundation.zurb.com/docs/components/reveal.html" rel="nofollow">http://foundation.zurb.com/docs/components/reveal.html</a></p>
  
  <p>How can i adjust my code so the correct movie is shown each time a link is clicked?</p>
  
  <p>UPDATE
  I created a codepen to show what's happening.  try opening &amp; closing the modals using the one &amp; two links
  <a href="http://codepen.io/anon/pen/HkoKg" rel="nofollow">http://codepen.io/anon/pen/HkoKg</a></p>