jquery - Additional Play Button for HTML5 Flowplayer -

i using latest version (v5.4.1) of html5 flowplayer , trying add additional play button, video start click on button click on video container.

therefore i've embedded video in overlay (which working fine):

<div id="overlay">     <div id="is-finished-demo" class="flowplayer is-splash is-closeable color-alt" data-swf="js/flowplayer.swf">         <video preload='none'>              <source type="video/mp4" src="media/video.mp4" />              <source type="video/ogg" src="media/video.ogv" />              <source type="video/webm" src="media/video.webm" />         </video>          <div class="when-video-ends">             <a class="fp-toggle">                 <div class="play-this-again"></div>             </a>         </div>     </div> </div>  <script> $('#overlay .flowplayer').bind('ready unload', function(e) {     $(this).parent().toggleclass('is-active', e.type == 'ready'); });  $('.flowplayer').flowplayer({     tooltip: false,      native_fullscreen: true }); </script> 

in addition code above there should additional button should open #overlay , starts video right away.

to achive i've created simple text button trigger video onclick:

<div id="additional-play">     <span>play</span> </div>  <script> $('#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     }); }); </script> 

...but click on #additional-play doesn't yet.

how can fix this? there more elegant way implement additional button?

my approach initiate player , use load method on click. need use splash screen

example

var player = $('.flowplayer').flowplayer({     tooltip: false,     native_fullscreen: true,     splash: true });  $('#additional-play').click(function(){     player.load(); });