ADVERTISEMENT

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

Telegram Group Join Now

ADVERTISEMENT

How To Create HTML Video Overlay Play Button

 
add play button on video in html
Add Play Button To Video Using HTML
 
 

HTML Video Overlay Play Button

 

A very warm welcome to code with random.In today’s blog in which we are going to learn how to create video play icons using html, css javascript, and jquery.

ADVERTISEMENT

ADVERTISEMENT

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

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.

ADVERTISEMENT

Live Preview Add Play Button To Video Using HTML:-

ADVERTISEMENT

Code by Reinis
Project Download Link Available Below
Language used HTML, CSS, and JavaScript
External link / Dependencies YES
Responsive YES
Add Play Button To Video Table

Add Play Button To Video Using HTML:

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

ADVERTISEMENT

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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

Jquery:-

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

100+ Front-end Projects for Web developers (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>

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(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.

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

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

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.

$(".video")
    .parent()
    .click(function () {
        if ($(this).children(".video").get(0).paused) {
            $(this).children(".video").get(0).play();
            $(this).children(".playpause").fadeOut();
        } else {
            $(this).children(".video").get(0).pause();
            $(this).children(".playpause").fadeIn();
        }
    });

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, Your Html Video plays Button Using Html Css And Js Is Done.in Js Output You Can See That The Button Of Playpause Is Working And When We Click The Button It Start With Video.

Final Output Of Add Play Button To Video Using 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?

Yes!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT