PHPackages                             levmyshkin/vidbg - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. levmyshkin/vidbg

ActiveDrupal-library[Image & Media](/categories/media)

levmyshkin/vidbg
================

An HTML5 video player.

2.1.0(2y ago)055.9k↓26.1%MITTypeScript

Since May 3Pushed 2y agoCompare

[ Source](https://github.com/levmyshkin/vidbg)[ Packagist](https://packagist.org/packages/levmyshkin/vidbg)[ Docs](https://drupalbook.org/)[ RSS](/packages/levmyshkin-vidbg/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

vidbg.js
========

[](#vidbgjs)

A minimal vanilla JavaScript video background plugin.

Compatibility
-------------

[](#compatibility)

- All modern web browsers
- IE 11+
- All mobile web browsers that support autoplaying HTML5 ``

Working With Wordpress
----------------------

[](#working-with-wordpress)

If you plan on using vidbg.js with WordPress, make your life a little bit easier and download the plugin I made on the [Wordpress Repo](https://wordpress.org/plugins/video-background/).

Usage
-----

[](#usage)

### Install

[](#install)

```
npm install vidbg.js
```

Or [download the built `vidbg.zip` from GitHub](https://github.com/blakewilson/vidbg/releases/latest)

### Instructions

[](#instructions)

In the browser:

```

```

Or if you are working with modules:

```
import vidbg from "vidbg.js";
```

### Initializing the Script

[](#initializing-the-script)

The script accepts three arguments.

```
var instance = new vidbg(selector, options, attributes);
```

The selector argument is any JavaScript selector, the [options](https://github.com/blakewilson/vidbg/tree/v2#options) are for configuring vidbg.js, and the [attributes](https://github.com/blakewilson/vidbg/tree/v2#attributes) argument modifies the actual `` element.

```
var instance = new vidbg(
  ".vidbg-box",
  {
    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
    webm: "path/to/video.webm", // URL or relative path to webm video
    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
    overlay: false, // Boolean to display the overlay or not
    overlayColor: "#000", // The overlay color as a HEX
    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
  },
  {
    // Attributes
  }
);
```

Note: Supplying both `.mp4` and `.webm` will increase browser compatibility.

### Options

[](#options)

```
const defaultOptions = {
  mp4: null,
  webm: null,
  poster: null,
  overlay: false,
  overlayColor: "#000",
  overlayAlpha: 0.3,
};
```

### Attributes

[](#attributes)

```
const defaultAttributes = {
  autoplay: true,
  controls: false,
  loop: true,
  muted: true,
  playsInline: true,
};
```

### Overlay

[](#overlay)

Setting the `overlay` option to `true` will add an RGBA background over your video. This is helpful when you want to display text or meaningful content over the video background to increase legibility.

### Fallback Image Flashing

[](#fallback-image-flashing)

You may experience the fallback image flash on page load. This is because the fallback image is added through JavaScript. As a result of this, it will load after CSS styles are rendered.

If you'd like to combat this, you can preset the fallback image through CSS. For example, if your selector is `.video-box` you could do something like:

```
.video-box .vidbg-container {
  background-image: url(/assets/link-to-fallback.png);
}
```

### Methods

[](#methods)

Below are the methods that are available:

```
// First, create the vidbg.js instance.
var instance = new vidbg(".vidbg-box", {
  mp4: "http://example.com/video.mp4",
  webm: "path/to/video.webm",
  poster: "path/to/fallback.jpg",
});

// Manually resize the video background
instance.resize();

// Manually play the video
instance.playVideo();

// Manually pause the video
instance.pauseVideo();

// Get the video playing state
instance.isVideoPlaying();

// Remove the  element
instance.removeVideo();

// Completely remove the video background
instance.destroy();
```

Media
-----

[](#media)

Video and fallback image provided by Christophe Tauziet at

License
-------

[](#license)

vidbg.js is licensed under The MIT License. You can view it [here](https://github.com/blakedotvegas/vidbg/blob/master/LICENSE).

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity30

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

745d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7b36520942f79193ba42311edf66bce9654c126a2d6733a5b3a627a4a217229f?d=identicon)[levmyshkin](/maintainers/levmyshkin)

---

Top Contributors

[![blakewilson](https://avatars.githubusercontent.com/u/5946219?v=4)](https://github.com/blakewilson "blakewilson (103 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![levmyshkin](https://avatars.githubusercontent.com/u/1680925?v=4)](https://github.com/levmyshkin "levmyshkin (1 commits)")

---

Tags

HTML5videoplayervideo background

### Embed Badge

![Health badge](/badges/levmyshkin-vidbg/health.svg)

```
[![Health](https://phpackages.com/badges/levmyshkin-vidbg/health.svg)](https://phpackages.com/packages/levmyshkin-vidbg)
```

###  Alternatives

[videojs/video.js

An HTML5 video player.

39.6k24.3k](/packages/videojs-videojs)[happyworm/jplayer

jPlayer allows you to create a media player with a consistent interface and experience across all browsers.

4.6k114.2k1](/packages/happyworm-jplayer)[php-ffmpeg/php-ffmpeg

FFMpeg PHP, an Object Oriented library to communicate with AVconv / ffmpeg

5.0k21.7M165](/packages/php-ffmpeg-php-ffmpeg)[laravel-admin-ext/media-player

Intergrates mediaelement into laravel-admin

3253.7k](/packages/laravel-admin-ext-media-player)[fg/multiplayer

Builds customizable video embed codes from any URL.

446.8k1](/packages/fg-multiplayer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)