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.

You May Also Like

4 thoughts on “How to Add HTML5 Video Overlay Play Button”

  1. HI,
    I’ve been struggling to place a play/pause button over a video for a project and really like what you have designed in the OVERLAY PLAY BUTTON.
    To be honest I am a novice and know very little about coding and I am kind of lost following your instructions.

    Could you show me how to use this code with this Embed code?

    Thank you,
    Tony

    Reply
    • Hi Tony!
      Glad to hear from you that our content helpful for beginners like you.
      Generally, you don’t need to place a play button over an embedded video as such videos has a play button.

  2. You are right, it does have controls at the bottom. The problem is when the video appears in a mobile device the controls are too small to use. I either need to have the control buttons scale larger, or have a play/pause button for users to access.

    Any suggestons would be most helpful.

    Reply
    • You can use the CSS scale property to enlarge the button on mobile devices.

      @media only screen and (max-width: 480px){
         .play-button{
            transform: scale(1.08);
         }
      }
      

Leave a Comment