How To Create Html5 Video Overlay Play Button (Source Code)

How To Create Html5 Video Overlay Play Button (Source Code)

How To Create Html5 Video Overlay Play Button (Source Code)

HTML5 VIDEO OVERLAY PLAY BUTTON

A very warm welcome to code with random’s today’s blog in which we are going to learn how to create video play icons using html, css javascript, and jquery.
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 server:-

Html code video overlay play button:

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.

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.

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>

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+ Front end 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;
}

CSS OUTPUT:-

 

Javascript code:-

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

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();
        }
    });

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.

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

Share on:

Leave a Comment