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:-

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:-

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
Ajax
Utilities

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <video class="video">
        <source
            src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4"
            type="video/mp4"
        />
    </video>
    <div class="playpause"></div>
</div>

.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper {
    display: table;
    width: auto;
    position: relative;
    width: 50%;
}
.playpause {
    background-image: url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    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;
}
.wrapper{
    display:table;
    width:auto;
    position:relative;
    width:50%;
}

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-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    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;
}

CSS OUTPUT:-

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