Convert HTML5 Video Into Background – CleanBackgroundVideo.js

Category: Image | November 19, 2020
0 Comment
Demo Download
Author:jordanpinski
Views Total:112 views
Official Page:Go to website
Last Update:November 19, 2020
License:MIT

Preview:

Convert HTML5 Video Into Background – CleanBackgroundVideo.js

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.

See Also:

You Might Be Interested In:

Leave a Reply