HTML
jQuery
video

HTML5 video playing on any web page is very easy, in this tutorial we can show you how to add video on html and make it play and pause without using html controls. I personally use this  play pause because many times we are using video to play auto animation to website

Below is the code and embed codepen to show its works:

<!DOCTYPE html>
<html>

<head>
    <title>video</title>
    <style>
        .overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        video#video {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <video id="video">
            <source src="sample.mp4" type="video/mp4">
        </video>
        <div class="play overlay"><img src="play.png" /></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script>
        jQuery(document).ready(function() {
            jQuery(".container").click(function() {
                if (jQuery("#video").get(0).paused) {
                    jQuery("#video").trigger('play');
                    jQuery(".play").fadeOut(500);
                } else {
                    jQuery("#video").trigger('pause');
                    jQuery(".play").fadeIn(500);
                }
            });
        });
    </script>
</body>

</html>

Codepen:

 

See the Pen PoPNvqR by key2goal (@key2goal) on CodePen.


Please Comment your thoughts and feedback below and add something if you found good in anywhere to help others

Hit a like Button If you like the Post.

Many Thanks

Comments

Add new comment

Other Articles

Wordpress Error with php 7.1 - PHP Fatal error: Uncaught Error: [] operator not supported for strings

Hey, This is error caused by php7 and later,many application will face this error Reason behind is that the php 7 will not convert the blank variable with is define as string to array:

Enable Drupal 8 Error Reporting

To Enable Drupal 8 Error Reporting, Put This code at top of sites/default/settings.php.

Print array or object in watchdog drupal 7

hey, For many purpose we have to print the array or object while making a custom modules or debuging any old module, we have to print the array or object to see the values are fine or not, drupal p

Prevent to Load a js file on particular page using hook_js_alter Drupal 7

Drupal provided the lots of hook to extents its functionality, using this we can prevent a js file to load on particular page using HOOK_JS_ALTER

WAI-ARIA Roles

See Details Here https://www.drupal.org/node/1179668

Get average number with PHP

<?php //put all integer in array $array = array(9,18,9,5,6,45); //Calculate the average. $average = array_sum($array) / count($array);

How to override different version of Jquery in Drupal 8 using theme

Drupal 8 use its own jquery version by default and if you want to use the other version of jQuery instead of default than this tutorials steps is for you, sometimes we need different version to oth

Fix Bug Phpmyadmin [sql.lib.php] + Php7.2 + Ubuntu 16.04

I have faced this error recently , look like this    Warning in ./libraries/sql.lib.php#601

Html Dom parser to Extract the HTML data from Html page

Html Dom parser to Extract the HTML data from Html page  See the attached Zip file 

Subtract two angularjs dates

hey, Here you get how to subtract to date in angularjs with core functionality

Install Multiple PHP 7.3 / 7.2 / 7.1 on Ubuntu 18.04 / Ubuntu 16.04

If you want to Install Multiple PHP version on ubuntu/Linux system then this tutorial is for you. and on ubuntu shell using root user and follows steps below:

How to create the directories and sub directories in one command linux

Many times we are want to create multiple directories and sub-directories under it and usually we do cd and mkdir one by one, it is very time consuming and it sometimes slow down our workflow.

Send Email using smtp module with Gmail

Here is the link that helps to configure stmp module with Gmail configuration and enables drupal

Vertical Bar Divider in a Menu using CSS

Many of site you have seen that there is menu separator uses like simple bar, so in this tutorial we can see how we can do that by just using css, like the below image example

Drupal site maintenance not affecting front page

function HOOK_preprocess_page(&$vars) { global $user;

Export Mysql database using SSH

Export The database directly from command line is Easy and Fast. Follow these steps to export the database using SSH (putty terminal)

Facebook post customisation posted using web app using Facebook Open Graph

Facebook is Providing autoposting functionality using website application and provides to display you website content on your facebook page.

Nodejs With Xampp

Hello Guys, We can easily connect the Nodejs with xampp by follow simple steps -

Drupal 8 mutlisite setup

In Drupal 8 Multisite setup is almost same as the Drupal 7.

How to Manually Disable a WordPress Plugin

 Manually Disable a WordPress Plugin in Just 4 Steps :

Drupal 8 add custom menu classes to using menu.html.twig

In Drupal 8 Twig templates give extra power to drupal to add dynamic content in twig style, In this tutorial we can see how we can add the custom menu classes to menu ul li using menu.html.twig.

How to Install Civicrm into Drupal 7

There is a direct guide available on CiviCRM Website, Here we follow faster steps to do the same.

How to get your MailChimp LIST ID

Mailchimp is marketing automation platform and is provide email for marketing your product or business whatever you like, today its most trusted service providing all over the globe.

Recent Posts

[SOLVED] PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting

If you get the same error like below in VScode editor then you are the right place to 

Redirect Old Domain to New Domain via .htaccess

Usually we develop the site on developement or subdomain and when we finally mirgate the to new domain then some of thing will remain or page redirect happens in  sometimes , so In this case .htacc

Create a Flag link programmatically and render flag link in twig template drupal 8

This article is refer to generate the flag link programmatically and render in drupal 8 twig template, before in drupal 7 its was quiet easy to render or generate flag link in just a single line of

Jquery prevent enter to submit form

If you want to prevent the form submit using jquery, then this page helps you to doing this.

Code:

Import and Export Drupal 8 Views, Or Import and Export any configuration Drupal 8

Import and Export configuration is the basic protocol to staging the website or production website deployment, In Drupal 7, we need the extra modules to import and export or we can use features mod

How to override different version of Jquery in Drupal 8 using theme

Drupal 8 use its own jquery version by default and if you want to use the other version of jQuery instead of default than this tutorials steps is for you, sometimes we need different version to oth

Subscribe to Mailchimp programmatically via api with PHP

In this tutorial we can see how to subscribe to the mailchimp subscribe list using php programmatically via api,

For this you need a mailchimp account, api key and list id 

How you can get Mailchimp API KEY

By Follow steps below, you can find the api key or create the api key at mailchimp and use it to your website to connected the site with mailchimp to collect the subscribe in fastest way.

How to get your MailChimp LIST ID

Mailchimp is marketing automation platform and is provide email for marketing your product or business whatever you like, today its most trusted service providing all over the globe.

Drupal 8 add custom menu classes to using menu.html.twig

In Drupal 8 Twig templates give extra power to drupal to add dynamic content in twig style, In this tutorial we can see how we can add the custom menu classes to menu ul li using menu.html.twig.

How to create the directories and sub directories in one command linux

Many times we are want to create multiple directories and sub-directories under it and usually we do cd and mkdir one by one, it is very time consuming and it sometimes slow down our workflow.