HTML5ビデオボタンを中心に変更

Question

HTML5ビデオタグの中央にあるボタンを変更する方法はありますか？私は、ビデオのコンテナを配置し、その中に別の絶対配置されたdivをバックグラウンドとしてボタンに追加し、play（）をトリガーするスクリプトを追加しました。イベントとそれは動作しませんでした。ここで

はスクリーンショットです：video

は、ここに私の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 --> 

は、ここに私のjQueryの：

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

は、ここに私の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} 

私が欲しいですvideoタグ以下enter image description here

Answer 1

移動カスタムプレイ：

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