YouTube API with Foundation Modal

Question

I'm trying to show & autoplay youtube videos in a modal when a user clicks a link.

I have this working for the first video, however subsequent videos open the initial video.

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.

<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>

I am using foundations modal reveal. http://foundation.zurb.com/docs/components/reveal.html

How can i adjust my code so the correct movie is shown each time a link is clicked?

UPDATE I created a codepen to show what's happening. try opening & closing the modals using the one & two links http://codepen.io/anon/pen/HkoKg

Will Will · Accepted Answer · 2014-10-03T00:53:04

This was just me getting my code muddled, not something specific to YT or Reveal working version in this pen

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" />');
});

YouTube API with Foundation Modal

1 Answers