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: