Pause or Terminate Youtube Video

Question

Currently I use the following script to pause youtube video:

HTML:

<span onClick="stopVideo();" class="wmg-close"></span>

<div id="player<?= $dAgenda['id'];?>"></div>

Javascript inside PHP Repeat Loop:

<script type="text/javascript">   
            var player;
              function onYouTubeIframeAPIReady() {
                player = new YT.Player('player<?= $dAgenda['id'];?>', {
                  height: '230',
                  width: '454',
                  videoId: '<?= $dAgenda['link'];?>',
                  events: {}
                });
            }
              function stopVideo() {
                player.stopVideo();
              }         
            </script>

Outside of PHP Repeat Loop:

<script type="text/javascript">
// 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);
</script>

Completion:

The video is only appearing for the last PHP loop movie!

Answer 1

Use your own Javascript API Youtube

Start the video and put it in the player variable (as the example of the API itself)

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { }
    });
}

Then just add to your click span the method to stop the video

function stopVideo() {
    player.stopVideo();
}

Example using the API Jsfiddle