Change HTML5 video button on center

Question

Is there a way to change the button on the center of an HTML5 video tag? I tried positioning the container of the video and adding another absolutely positioned div inside of it with the button as a background and added a script that would trigger the play(); event and it didn't work.

Here's a screenshot: video

Here's my HTML:

<div id="freq-content">
    <div class="custom-play"></div>
     <video controls>
        <source src="_assets_/video/videoplayback.mp4" type="video/mp4">
     </video> 
</div><!-- /#freq-content -->

Here's my jQuery:

$('.custom-play').click(function(){
    $(this).hide();
    $('#freq-content video').play();
});

Here's my CSS:

#freq-content{position:relative}
#freq-content video{height:750px;width:100%}
.custom-play{position:absolute;left:0;top:0;right:0;bottom:0;background:url(../images/button-play.png) center center no-repeat}

I want the center button to be like this: enter image description here

Answer 1

move custom play below the video tag:

  <div id="freq-content"> <video controls> <source src="_assets_/video/videoplayback.mp4" type="video/mp4"> </video> <div class="custom-play"> </div> </div>