title: Additional Play Button for HTML5 Flowplayer
body: <p>I am using the latest version (v5.4.1) of the HTML5 Flowplayer and I am trying to add an additional Play button, so that the video will start with a click on the button as well as with a click on the video container.</p>
  
  <p>Therefore I've embedded the video in an overlay like this (which is working fine):</p>
  
  <pre><code>&lt;div id="overlay"&gt;
      &lt;div id="is-finished-demo" class="flowplayer is-splash is-closeable color-alt" data-swf="js/flowplayer.swf"&gt;
          &lt;video preload='none'&gt;
               &lt;source type="video/mp4" src="media/video.mp4" /&gt;
               &lt;source type="video/ogg" src="media/video.ogv" /&gt;
               &lt;source type="video/webm" src="media/video.webm" /&gt;
          &lt;/video&gt;
  
          &lt;div class="when-video-ends"&gt;
              &lt;a class="fp-toggle"&gt;
                  &lt;div class="play-this-again"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('#overlay .flowplayer').bind('ready unload', function(e) {
      $(this).parent().toggleClass('is-active', e.type == 'ready');
  });
  
  $('.flowplayer').flowplayer({
      tooltip: false, 
      native_fullscreen: true
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>In addition to the code above there should be an additional button which should also open the <code>#overlay</code> and starts the video right away.</p>
  
  <p>To achive this I've created a simple text button to trigger the video onclick:</p>
  
  <pre><code>&lt;div id="additional-play"&gt;
      &lt;span&gt;Play&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('#additional-play').click(function () {
      $('#overlay .flowplayer').bind('ready unload', function(e) {
          $(this).parent().toggleClass('is-active', e.type == 'ready');
      });
  
      $('.flowplayer').flowplayer({
          tooltip: false, 
          native_fullscreen: true
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>...but the click on <code>#additional-play</code> doesn't do anything yet.</p>
  
  <p>How can I fix this? Is there a more elegant way to implement an additional button?</p>