How to Add HTML5 Video Overlay Play Button

Adding a button over a photo is so easy by using the CSS absolute property but what about the overlay play button over the HTML5 video? For this, we will take the help of Javascript along with CSS.

The Javascript will help us to Play/Pause the video whereas the CSS will use to position the button element. In our previous article, we have explained the method of adding CSS text over a video and here we will use almost the same technique but with the addition of Javascript.

The video button will work in both ways. It will allow you to play the video on click and also pause the video when clicking again. We are going to use the HTML button then place the HTML5 video tag to define the video.

By using javascript, we will handle its Play/Pause functionality. We will also manage the active state of the button. Lastly, we will make the button work with video.

Let’s take a look at the implementation process and know how we can do that:

How to Add a Play Button Over HTML5 Video

We will start with HTML, and we hardly have a few lines of HTML code. What we need is to have a button which we will position over the video and then we will have video HTML5 code define below the button code.

<button class="active">play</button>
<video id="banner-video" preload="auto" loop>
	<source src="https://static.videezy.com/system/resources/previews/000/002/719/original/cloudy-sunset.mp4">
</video>

That’s It about HTML and now CSS. First, we will make the fullscreen HTML5 responsive video as Background. We do this achieve using the position absolute.

CSS Style for Overlay Play Button

We will set the width and height to 100% and also add the transition. The important thing, we will use the z-index to keep the video in the background and over the button on the video.

video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

To align the button center of the video, we will use the position absolute just like we did for the video. To make the button look good in appearance, we will add a background color, font size, and color.

button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
}

The button background color will change the inactive status.

button.active {
  background-color: #0077a2;
}

The JavaScript

After defining the ready function, we will use the getElementById function to get the ID of the video. Next, on click function will set the current class to added active level and play the video.

$( document ).ready(function() {
var ctrlVideo = document.getElementById("video"); 

$('button').click(function(){
  if ($('button').hasClass("active")){
    
        ctrlVideo.play();
    
    $('button').html("Pause");
    $('button').toggleClass("active");
  } else {
    
        ctrlVideo.pause();
    
    $('button').html("play");
    $('button').toggleClass("active");
  }
});

});

That’s all, let me know by comment below if you’re able to add an overlay play button on HTML5 video.