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

You're calling `.play()` on a JQuery object, not the DOM element. Take a look at this: http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery — DBS, Sep 16 '16 at 17:10
Thanks, DBS. @Pranesh, I attached a picture of the button I want to use — Chawdiee, Sep 16 '16 at 17:27
You literally just need to change the image `background:url(../images/button-play.png)` to your new desired image. — DBS, Sep 16 '16 at 17:27

score 0 · Answer 1 · answered Sep 16 '16 at 20:09

0

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>

answered Sep 16 '16 at 20:09

sean

1,220
9
8

Change HTML5 video button on center

1 Answers1