Toggle Play/Stop for plyr.js

Question

I am having trouble getting my custom play/stop toggle button to work, my sceneario: I am loading a youtube video via plyr.js. This video is hidden. I have a custom play/stop button which sits outside the video and it is visible on the page. I am trying to make the play/stop button to toggle the video to show/hide. The video need to be loaded at the time of toggle to show happens. The video need to stop at the time of toggle to hide happens.

This is what I have attempted so far:

playVideo = function(id){
    $('#section-'+id).toggleClass('show-clue');

    if($('#section-'+id).hasClass('show-clue')){
      const video = new Plyr('#section-'+id+' .video', { controls: [
          'play-large',
          'fullscreen'
      ]});
      video.play();
    }else{
      const video = new Plyr('#section-'+id+' .video', { controls: [
          'play-large',
          'fullscreen'
      ]});
      video.stop();
    }
  }

The function is getting called within an onclick even like so:

<a href="#" onclick="playVideo('2');">Clue</a>

My code above is giving me this error: TypeError: this.media is undefined

Any help is much appreciated