Put HTML5 Video As A Background In HTML - jQuery Tape.js
File Size: | 7.4 KB |
---|---|
Views Total: | 3258 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.