In this tutorial, We will learn how to set body background video using Vide jquery plugin. I am gonna teach you to set body background video using the jquery Vide plugin. We will talk about the jquery video plugin used to set the video in the body background.



php-tutorial/
┣ index.php
┣ jquery.vide.min.js
┗ sample-video.mp4


Example:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Body background Video Using Vide Jquery Example</title>
        <style>
            html, body {
                margin: 0;
                width: 100%;
                overflow-x: hidden;
                height: 100%;
            }
            
            h1{
                position: relative;
                top: 50px;
                left: 100px;
                color: #fff;
                font-size: 42px;
            }
        </style>
    </head>
    <body data-vide-bg="sample-video.mp4"> 
        <h1>Body Content</h1>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="jquery.vide.min.js" type="text/javascript"></script>
    </body>
</html>


jquery.vide.min.js you can download from here  https://github.com/vodkabears/Vide/blob/master/dist/jquery.vide.min.js