Customizable Video Background Plugin - jQuery backgroundVideo

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.