Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-background with all npm packages installed. Try it out:

var videojsBackground = require("videojs-background")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-background v1.0.7

Full background video for video.js

Video.js Background

Full background video for video.js

Getting Started

Once you've added the plugin script to your page, you can use it with any video:

<style>
  .videojs-background-wrap {
    overflow:hidden;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    z-index: -998;
  }
</style>
<script src="video.js"></script>
<script src="videojs-background.js"></script>
<script>
  videojs('bg-video').Background();
</script>

There's also a working example of the plugin you can check out if you're having trouble.

Documentation

Plugin Options

You may pass in an options object to the plugin upon initialization. This object may contain any of the following properties:

container

Type: String Default: 'body'

This specifies the target element for your background video. It defualts to the body for a full background video.

autoPlay

Type: Boolean Default: true

This auto-plays the background video. If this is set to false you have to manually trigger the video start.

volume

Type: Double Default: 0

This sets the default volume level. The range is 0 - 1.

mediaAspect

Type: Double Default: 16 / 9 (1.777777778)

This sets the default video aspect ratio. If using HTML5 media type this will be retrieved automatically.

mediaType

Type: String Default: 'html5'

If you are using a custom media type; such as 'youtube'. You will need to set this so the video can be targetted correctly.

Notes

On some mobile devices (such as iOS), auto playing videos is not allowed. In the event of this the videos 'poster' will be displayed as the full background.

Installation

You can simply take the JS from /lib/videojs-background.js and use as per the exmaple.html. Alternatively, you can use the below package managers;

Bower

bower install videojs-background

Release History

  • 1.0.0: Production ready
  • 0.1.0: Initial release

Credits

  • Matthew Harrison-Jones: @matt_hojo
  • A massive hat tip goes to BigVideo.js for some of the algorithms for calculating fullscreen.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free