title: Toggle Play/Stop for plyr.js
body: <p>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.</p>
  
  <p>This is what I have attempted so far:</p>
  
  <pre><code>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();
      }
    }
  </code></pre>
  
  <p>The function is getting called within an onclick even like so:</p>
  
  <pre><code>&lt;a href="#" onclick="playVideo('2');"&gt;Clue&lt;/a&gt;
  </code></pre>
  
  <p>My code above is giving me this error: <code>TypeError: this.media is undefined</code></p>
  
  <p>Any help is much appreciated</p>