Put HTML5 Video As A Background In HTML - jQuery Tape.js

An HTML5 video builder that allows you to put an HTML5 video as a covering background in any container element.

Also provides an image fallback that displays a background image instead if your browser doesn't support HTML5 videos.

How to use it:

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

<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 will be used as a background in a specific 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 done.

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

5. Determine whether to auto play the HTML5 video on mobile, tablet, or desktop.

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

6. Specify a fallback image 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 display content on the top of the video background, don't forget to make the postion absolute and adjust the z-index property slightly.

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

Changelog:

2020-11-02

• Feature updated

---

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