JavaScript pause button for YouTube video that has been cloned?

Question

Ive made a pause button for a YouTube video. This worked fine however now I need to clone the video. This is due to how the carousel that im using works and also so the video can be displayed in a Lightbox.

Below is a simplified version of my code. Now the pause button only works on the first video. How can I make a button that will pause all cloned videos?

http://jsfiddle.net/36vr2kjv/2/

<p class="trigger">Trigger</p>
<p class="trigger2">Trigger2</p>

<div class="player-wrap">
  <div id="player"></div>
</div>

<div id="player2"></div>

var player;

$(function() {
    // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

        $('.trigger').click(function(){
            //this works
            player.pauseVideo()
        });

    return player;
});

$(function() {
    setTimeout(function(){
        $('.player-wrap').clone().appendTo('#player2');
    }, 2000);
});

$(function() {
    $('.trigger2').click(function(){
            // this does not work
            player.pauseVideo()
        });
});

Answer 1

Actually there is concept of deep cloning and shallow cloning. Shallow cloning does not copy events hence you have to use deep cloning. Where ever you are using clone() instead use clone(true). For example in above code snippet you can use:

  $(function() {
    setTimeout(function(){
        $('.player-wrap').clone(true).appendTo('#player2');
    }, 2000);
});