How to Add HTML5 Video Overlay Play Button

It is isn’t quite hard to add the Overlay Play button over the HTML5 video. All we need to use the CSS and bit of Javascript.

In our previous article, we have explained the method of adding CSS text over a video which makes possible with pure CSS.

In this article, we are going to use a similar technique but the addition of Javascript.

The button will work in both way; it will allow to play the video click and also pause the video click again. We are going to use the HTML button then place the HTML5 video tag to define the video.

By using the javascript, we will handle it’s 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 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 overlay play button on HTML5 video.

Categories How To

You May Also Like

Leave a Comment