Add Play Button To Video Using HTML | Video Overlay Play Button

How to Add Video Overlay Play Button In HTML?

How to Add Video Overlay Play Button In HTML?

Add Video Overlay Play Button In HTML
Add Play Button To Video Using HTML

Html Video Play Button:-


Hello Coder! A very warm welcome to Codewithrandom. In today’s blog, we are going to learn How to Add a Video Overlay Play Button In HTML.

A video overlay play button that can be used to watch videos and is present on all media players. A single triangle with an upward arrow is frequently used as the play button.

50+ HTML, CSS and JavaScript Projects With Source Code

In this, we see and create how the video play button work by doing simple code…
So let’s start to create the button but before that, we see the live server.

Live Preview add a play button to video html:-

Code byReinis
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesYES
Add Play Button To Video


Add Play Button To Video Using HTML Code:

Html is used for making the layout of the website. So our layout is very simple we have to just use only the video tag and source tag inside the video tag we insert the source tag in which we give a link to the video. We are also using jquery so we need to insert jquery cdn.

Video tag:-

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.

Portfolio Website using HTML and CSS (Source Code)

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

There are three supported video formats in html: mp4, webm, and ogg.

Source tag

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.

But here we are using a source tag for embedding the video.


Jquery is a lightweight, “Write less, do more”, javascript library.

The purpose of jquery is to make it much easier to use javascript on your website.

Jquery takes a lot of common tasks that require many lines of javascript code to accomplish and wraps them into methods that you can call with a single line of code.


Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)


Jquery also simplifies a lot of the complicated things from javascript, like ajax calls and dom manipulation.


The jquery library contains the following features:


Html/dom manipulation
Css manipulation
Html event methods
Effects and animations


Here div class will be the wrapper and play pause button and source link of the video.

<script src=""></script>
<div class="wrapper">
    <video class="video">
    <div class="playpause"></div>

We just create a div with the “wrapper” class, place the video tag inside the wrapper class, and add the structure for the video icon to the div. The video that will be played inside the app will have a source link provided.

The controls for our video player will be made using the div tag with the class “playpause.”

Html output:-

In this output, we can’t see anything it is a blank page…Because till now we haven’t set the height and width of the video.
Css code:-

As you know we are not able to see on the screen. So firstly we need to set the height and width of the video and for the icon, we are using a background image that is downloaded from the findicon.

50+ Html ,Css & Javascript Projects With Source Code

I hope you have concerned with the basics of the css like css selectors,border-box,flex-box, and background properties.

In this code, we see only the play pause button.

.video {
    width: 100%;
    border: 1px solid black;
.wrapper {
    display: table;
    width: auto;
    position: relative;
    width: 50%;
.playpause {
    background-image: url(;
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;

We will now make a play/pause symbol for videos using CSS. With the aid of CSS, we will gradually add the icon.

Step1:The video width will be adjusted to “100%” using the class selector (.video), and a 1 pixel solid black border will be added around the video using the border property.

Build your Own Tip Calculator in HTML, CSS, JAVASCRIPT

Now, using the wrapper class, we will set the display to “table,” the width to “auto,” and the position to “relative.”

.video {
    width: 100%;
    border: 1px solid black;

Step2: We will now add the play/pause symbol to our video using the class selector (.playpause). The play/pause symbol will first have a background picture added within, and then its width and height will be added using the width and height parameters.

.playpause {
    background-position: center;



Add Video Overlay Play Button In HTML

Javascript code:-

Instead plain javascript as we are using the jquery(javascript library).

10+ Javascript Projects For Beginners With Source Code

In this code the video will start when we click on play button.You can play pause the button.

    .click(function () {
        if ($(this).children(".video").get(0).paused) {
        } else {

The play/pause icon functionality was added using the jQuery framework inside of Javascript. In javascript, we first choose the video class, and then we use the click method to determine whether the video is paused. If it is, the user’s click will cause the movie to fade out; if it is playing, it will continue to play. An emblem will gradually appear while the video pauses.

Finally, Add the Video Overlay Play Button In HTML Done.  You Can See That The Button Of the Play pause Is Working, And When We Click The Button It Starts With a Video.

Final Output Of Video Overlay Play Button In HTML:-

I Hope You Liked The Blog Please feel Free To Comment Down Your Queries Related To the Code Part Or the Blog Part. If You Like It Or have Any Doubts Comment In the Comment Box.

Thank you.

Written By – Sayali Kharat & Himanshu Singh

Which code editor do you use for this Add Play Button To Video coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?


Leave a Reply