How are youtube actions controlled using javascript?

This way, for example, an iframe works for you:

<iframe id="video" src="https://www.youtube.com/embed/XGSy3_Czz8k?enablejsapi=1&html5=1" allowfullscreen="" frameborder="0" width="420" height="315"></iframe>

We load the function in charge of stopping the video and the api to control it:

<script>
// Loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {

  var stopButton = document.getElementById("stop");
  stopButton.addEventListener("click", function() {
    player.stopVideo();
  });

}

</script>

Finally, once the video has been started, we stop it in this way:

<a href="#" id="stop">Stop</a> 

Saludes.

In your example I do not see how you pass the API video to DOM (id="videoM" ).

I leave you an example working with the events: PLAY , PAUSE and STOP :

View Demo

<!-- 1. El <iframe> (y el reproductor de video) reemplazarán esta etiqueta <div>. -->
<div id="videoM"></div>
<br>
<button id="play">PLAY</button>
<button id="pause">II</button>
<button id="stop">STOP</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.20/jquery.mb.YTPlayer.js"></script>

<script>

    // Este código carga el código IFrame Player API asincrónicamente.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

    // Esta función crea un <iframe> (y reproductor de YouTube)
    // después de las descargas del código del API.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('videoM', {
        height: '360',
        width: '640',
        videoId: 'XGSy3_Czz8k', // <= Pasar ID del Video
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    // La API llamará a esta función cuando el reproductor de vídeo esté listo.
    function onPlayerReady(event) {

      var playButton = document.getElementById("play");
      var pauseButton = document.getElementById("pause");
      var stopButton = document.getElementById("stop");

      // Descomentar esto si quieres que salte el video automáticamente
      //event.target.playVideo();

       playButton.addEventListener("click", function() {
          playVideo();
       });

      pauseButton.addEventListener("click", function() {
         pauseVideo();
      });

      stopButton.addEventListener("click", function() {
         stopVideo();
      });
    }

    // La API llama a esta función cuando cambia el estado del reproductor.
    // La función indica que cuando se reproduce un video (estado = 1),

    // var done = false;
    function onPlayerStateChange(event) {
    //  if (event.data == YT.PlayerState.PLAYING && !done) {
    //    setTimeout(stopVideo, 6000);
    //    done = true;
    //  }
    }

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

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

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

</script>