Customizable Video Background Plugin - jQuery backgroundVideo
File Size: | 5.18 KB |
---|---|
Views Total: | 2020 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery video background plugin to make your webpage more gorgeous and attractive.
The jQuery backgroundVideo plugin enables you to embed an HTML5 video into the page and make it as the background for the whole webpage or a specific container element.
Features autoplay, poster, controls, infinite loop, video preload, web video text tracks and much more.
Fore Chrome users, read this article: Autoplay Policy Changes
How to use it:
1. Download and load the backgroundVideo.js script after you've loaded jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="src/backgroundVideo.js"></script>
2. Call the function on the target container and specify the path your video file.
<div class="wrapper"> ... </div>
$(".wrapper").backgroundVideo({ mp4: "bg.mp4" });
3. Not only mp4, the plugin supports any type of video: ogg, webm, mpeg, m4v, etc.
$(".wrapper").backgroundVideo({ mpeg: "path/to/mpeg-file", mp4: "path/to/mp4-file", webm: "path/to/webm-file", ogg: "path/to/ogg-file", quicktime: "path/to/quicktime-file", x_msvideo: "path/to/x-msvideo-file", m4v: "path/to/m4v-file", rtf: "path/to/rtf-file", });
4. Customize the video background with the following options.
$(".wrapper").backgroundVideo({ // enables autoplay autoplay: true, // shows video controls controls: false, // enables cross origin crossOrigin: false, // Start and End time in the console buffered: false, // "auto" | "metadata" | "none" preload: false, // is muted? muted: true, // enables infinite loop loop: true, // path to poster image poster: "path/to/image-file", // custom text when Your browser does not support HTML5 video notSupportedText: "Your browser does not support HTML5 video.", // video ID settingID: "myVideo", // shows web video text tracks information track: false, track_src: "path/to/vvt-file", track_kind: "subtitle", track_srclang: "en", track_label: "test" });
This awesome jQuery plugin is developed by mikeludemann. For more Advanced Usages, please check the demo page or visit the official website.