html5 custom video player play pause button in center

html5 custom video player play pause button in center

by Sahil Kashyap

HTML

<div class="videoContainer">
  <video id="myVideo" width="380" height="240" audio="muted" autoplay="true" 
    
  src="//assets3.ign.com/videos/zencoder/2016/06/15/640/7080c56a76e2b74ec8ecfe4c224441d4-500000-1466028542-w.mp4" type="video/mp4"></video>
<button id="play">play</button>
<input type="button" id="play" value="Click">
</div>

CSS

.videoContainer
{
position:relative;
}

.videoContainer #play
{
    position: absolute;
    margin-left: -35%;
    margin-top: 15%;
    height: 50px;
    width: 50px;
}

JavaScript

var vid = $("#myVideo").get(0);
vid.pause();
$("#play").bind("click", function () {
        if (vid.paused) {
          vid.play();
        } else {
          vid.pause();
        }
  });