Responsive Background Video Plugin With Parallax Effect - backgroundVideo

backgroundVideo is a jQuery plugin that allows to set any html5 video as a background for a specific container, with an optional parallax effect on vertical page scrolling. The background video will auto scales while preserving the original aspect radio when the screen size changes. Also has the ability to automatically pause the video when scrolling out of view. Perfect for both desktop and mobile pages.

How to use it:

1. Embed an HTML5 video into the webpage as follows:

<div id="video-wrap" class="video-wrap">
  <video preload="metadata" autoplay loop id="my-video">
    <source src="1.mp4" type="video/mp4">
    <source src="1.ogg" type="video/ogg">
  </video>
</div>

2. Place the JavaScript file backgroundVideo.js after jQuery library.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="backgroundVideo.js"></script>

3. Use a jQuery selector to find the containing element and call the backgroundVideo() function to initialise.

$('#my-video').backgroundVideo();

4. All default plugin options.

$('#my-video').backgroundVideo({
  $videoWrap: $('#video-wrap'),
  $outerWrap: $(window),
  $window: $(window),
  minimumVideoWidth: 400,
  preventContextMenu: false,
  parallax: true,
  parallaxOptions: {
    effect: 1.5
  },
  pauseVideoOnViewLoss: false
});

---

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