How to Add HTML5 Video Overlay Play Button

Spread the love

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.

Share it!

You May Also Like

7 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);
         }
      }
      
  3. Hi there,

    I used this code and the button has been overlaid on top of the video, and it is functional with pausing/playing the video.
    However, the text does not change from “play” to “pause” on click.
    Also, how would I change the opacity of the button while the video is playing? I added $(‘button’).style.opacity = “0.5”; inside of the first if statement and it had no effect.
    Thanks for your help.

    Reply

Leave a Comment