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

send Variable to Js File From PHP in drupal Custom Module

If we need to use the php variable in our js file we can use Core Drupal.settings Functionality :  example:

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

Render menu on page template in custom way Drupal 8

If you want to render the menu items in custom way in page or node twig template of drupal 8 then this article is for you :  

Reindex the Array keys

Sometimes we need to slice the array for certain values using program a code and at that time key of array is also unset. If you faced the same then you can use these options

Drupal 7 content type template

Open the template.php file in your theme for editing. Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).

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

Install JAVA 8 on Ubuntu 18.04/16.04

Install java on Ubuntu 1)Install Oracle Java 8 

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 

How To Set or Change Timezone on Ubuntu 18.04 & Ubuntu 16.04

Sometimes we need to check logs or working cron according to our country time, then we need to change the timezone of the server, and if you have ubuntu you can change easily by single command

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.

Creating a Self-Signed SSL Certificate linux/centos

Self Signed certificates are those are signed by the same individual whose identity it certifies.

Convert a certificate into the cer,crt,der,pem format

For different reason we need the different format of certificates for different operating system, many of sites offering you to convert the certificates in different format online but if you have b

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

Bootstrap 4 Uncaught TypeError: Cannot read property 'fn' of undefined

while using bootstrap 4 we usually get this kind of error and jquery bootstrap.min.js is working correctly Error  is:

Allow Less Secure App Yahoo Mail

hey,  If you want to read email form script you need to allow less secure app as same as Gmail,  Just Go to the link, after login and allow less secure app at the bottom.

Update Drupal 8 core manually

This is small tutorial to how to update the Drupal 8 core manually using shell or FTP, Let start -

Drupal 8: check user is logged in or not in *.html.twig

In the new era the drupal8 twig is introduce, so old basic php drupal hook is not useful in theme templates.

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

Install Apache Solr on Ubuntu

Install Apache Solr 7.7 on Ubuntu 18.04 & 16.04 LTS This tutorials explains how to install solr 7 on ubuntu system 1) Install or Check Java

How To Install Webmin on Ubuntu 18.04

Webmin is open source control panel for linux machine, it is mainly use for server as file transfer, email configuration and other servers configuration using modern user interface.

Send Email using smtp module with Gmail

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

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

Drush Installation

Heys, Steps to installing drush using composer on server - login to putty - check the composer is install and working by "composer --version"

Recent Posts

Drupal 8: check user is logged in or not in *.html.twig

In the new era the drupal8 twig is introduce, so old basic php drupal hook is not useful in theme templates.

Add text to ckeditor textarea using jquery

In most of case we need to add or fill up form fields using jquery or Js, if you have trobble in loading data in textarea having ckeditor working already then this tutorial helps you.

How to Add a Custom Date Format in Drupal 8

In drupal 8 there is easiest way to add the date format is simply go link for your website

Retrieve the query used in mysql views

we can create the database views for many reason, but if we forget what query you was used to create the views or need to find out using which query results are generating here is the solution:

Send file as Email attachment using hook_mail_alter drupal 7 programmatically (example webform submit)

Hi guys,

In this tutorial we can see how we can send files as attachments in drupal 7 on webform submit using a hook_mail_alter 

[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