Use HTML5 Videos As Covering Backgrounds - JVideoBackground

The JVideoBackground jQuery plugin shows and plays HTML5 video as the background of the whole body or a specific container such as div, header, section, etc.

How to use it:

1. Load the main JavaScript file j-video-background.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="./lib/j-video-background.js"></script>

2. Initialize the plugin and specify the selection in which you want to inject the video background.

<header>
  <h1>Video Background</h1>
<header>

new $.fn.J_video_background({
    $el: $('header')
});

3. Specify the path to your HTML5 video.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4'
});

4. Decide whether to auto play the HTML5 video on init. Default: true.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    autoPlay: false
});

5. Decide whether to mute the HTML5 video when playing. Default: true.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    muted: false
});

6. Decide whether to auto loop the HTML5 video. Default: true.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    loop: false
});

7. Decide whether to create a mask on the HTML5 video. Default: true.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    mask: false
});

8. Set the z-index property.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    zIndex: '-1'
});

9. The default CSS ID of the video background.

new $.fn.J_video_background({
    $el: $('header'),
    src: 'bg.mp4',
    styleId: 'c-j-video-back'
});

---

This awesome jQuery plugin is developed by wso2848303. For more Advanced Usages, please check the demo page or visit the official website.