How to make use of it:

1. To start, insert the JavaScript jquery-tape-plugin.js and Stylesheet jquery-tape-styles.css into the HTML doc.

<link href="jquery-tape-styles.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery-tape-plugin.js"></script>

2. Then define the path to the HTML5 video that might be used as a background in a particular container.

<div class="container" 
     id="example" 
     data-mp4="1.mp4" 
     data-webm="1.webm">
     <div class="content">Any Content Here</div>
</div>

3. Apply a height property to the container and make it relative positioned.

.container {
  width: 600px;
  height: 450px;
  position: relative;
}

4. Finally, call the function buildHtmlVideo on the container and complete it.

buildHtmlVideo({
  parentElement: $("#parentContainer")
});

5. Determine whether or not to autoplay the HTML5 video on mobile, tablet, or desktop.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  playInMobile: true,
  playInTablet: true,
  playInDesktop: true
});

6. Specify a fallback picture for the video background.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  fallbackImage: "1.jpg"
});

7. Override the default data attributes:

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  webmVideo: $("#parentContainer").attr("data-webm"),
  mp4Video: $("#parentContainer").attr("data-mp4")
});

8. Execute a callback function when the plugin has been initialized.

buildHtmlVideo({
  parentElement: $("#parentContainer"),
  callback: function() {
    console.log("Build complete");
  }
});

9. To show content on the top of the video background, remember to make the position absolute and modify the z-index property slightly.

.content {
  z-index: 9999; 
  position: absolute; 
  top:2rem; left: 2rem;
}

Put HTML5 Video As A Background In HTML, HTML5 Background Video Plugin/Github

See Demo And Download