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

Add new comment

Other Articles

Embed Google maps on website (Static address )

Here using this website  we can get the embed the static map on our website.

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

Enable Drupal 8 Error Reporting

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

Recursively delete all files of a specific extension

Usually we all use "rm" command to delete or remove the files and folder on linux, but if we want to delete the specific type of content/files then we can use "find" command to find and "delete" co

Drupal 8 Theming Essential Guide

What's new? I’ll list some changes with the theming system of Drupal 8 compared to Drupal 7. You may have got familiar with these in the Drupal 7 version.

How to render block in Drupal 8 theme template

Similar to Drupal 7, Drupal 8 also gives the customization using theme template, If you want to place a block using programmatically you have following options : 

Render a drupal node d8 twig template

Render a Drupal node in drupal 8 twig template and module PHP code is a bit different from Drupal 7 because Drupal 8 uses Symfony and twig format, follow the step and you will available to render a

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 8 mutlisite setup

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

Menu template in drupal 8 for specific customization

Drupal 8 gives the flexibility to make menu template and design the menu with our need, to do this --

what is namespace in PHP?

https://stackoverflow.com/questions/3384204/what-are-namespaces

Getting permission error when installing CiviCRM under Drupal with Xampp

If you are getting permission error while installing CiviCRM on xampp then, its is default CiviCRM user permission error,

check if a string contains a specific word with PHP

In PHP sometimes we need to find the specific word in the string for the programitically use the code, there is a function called "

Render block and views block drupal 7 programmatically

This is article is for Drupal 7 to render block in templates and custom blocks using php codes Actually there is very simple ways to render block pro-grammatically 

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.

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

Test payment Card Numbers For online payment

This article is for developers who develop eCommerce or payment gateway system for apps and website.

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:

Flexslider Arrows Changed by arrow Images

Flexslider uses the arrows of its own flexslider family icons, if you want to change or replace with yours images you can do using following css.  

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 

Easy Way to use tooltip with HTML tags

The easiest way to use tooltip on any tags of HTML 1. Span Tag

Recent Posts

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.

Create Node drupal 8 programmatically with image upload using custom module

As we know drupal 8 use symphony, so module structure of drupal 8 is change and workflow functionality of doing thing also change.

Uncaught TypeError: CKEDITOR.tools.object.keys is not a function

Intergation of code snippet with ckeditor, cause this error "Uncaught TypeError: CKEDITOR.tools.object.keys is not a function".