Author: | jordanpinski |
---|---|
Views Total: | 112 views |
Official Page: | Go to website |
Last Update: | November 19, 2020 |
License: | MIT |
Preview:

Description:
A super tiny JavaScript library that uses an HTML5 video embedded in the document into the background of a container element you specify.
How to use it:
1. Load the CleanBackgroundVideo’s JavaScript and Stylesheet in the HTML page.
<link href="css/clean-background-video.min.css" type="text/css" rel="stylesheet" /> <script src="js/clean-background-video.min.js"></script>
2. Embed an HTML5 video into the document.
<video loop autoplay muted playsinline> <source src="1.mp4" type="video/mp4"> <source src="1.webm" type="video/webm"> <source src="1.ogv" type="video/ogv"> Your browser doesn't support the video element </video>
3. Add the data-background-video
attribute to the target element in which the video background will be placed.
<body class="example" data-background-video> ... </body>
4. Initialize the library and we’re done.
document.addEventListener('DOMContentLoaded', function() { var element = document.querySelectorAll('.example'); var cleanBackgroundVideo = new CleanBackgroundVideo(element); });
Changelog:
11/19/2020
- Removed unneeded polyfill.