jQuery Background Video

Instantly improve your HTML5 background videos with a single line of jQuery.

Built by the folks over at BG Stock - Premium HTML5 Background Videos.

What does the plugin do?

The plugin allows you to enhance your background videos in a few ways
- Allows you to fade in your video when it starts playing (to avoid a sudden jump)
- Emulates background-size: cover; / object-fit: cover;
- Destroys the video and prevents it downloading on iOS devices (because they can't do background video)
- Optionally auto-pause video after X seconds (easier on your users' power consumption)
- Optionally add and position a pause/play button

Example: http://codepen.io/GusRuss89/pen/bVwNrE

Installation

With bower
``
bower install jquery-background-video
`
With npm
`
npm install --save jquery-background-video
`
With git
`
git clone https://github.com/BGStock/jquery-background-video
`
Or just download the zip

How do I use it?

$3

`javascript

`

$3

`javascript

`

$3

`html



`
Note: the class names jquery-background-video and jquery-background-video-wrapper are only used in the CSS, just remember to update them there if you want to change them. The class name my-background-video is for demo purposes, this can be whatever you like.

If you're using the fade-in option you should also set the poster image as a background-image for your wrapper element.
`css
.element-with-video-bg {
background-image: url(path/to/your/poster.jpg);
}
`
It's important to use background-image instead of the shorthand background because the plugin CSS sets background-position, background-repeat and background-size, which would be overwritten by the shorthand background.

iOS Support: Automatic playing of videos is supported as of iOS 10+, but requires the playsinline attribute on the

$3

In your main JavaScript file

`javascript
$(document).ready(function(){
$('.my-background-video').bgVideo();
});
`

_OR_

With a data attribute on the video tag

`html
`

$3


`html

`

Options

$3

`javascript
$('.my-background-video').bgVideo({
fullScreen: false, // Sets the video to be fixed to the full window - your `

All options can alternatively be specified in data attributes on your video tag with a bgvideo prefix. Just change camel casing to hyphens and lower case. E.g. fadeIn becomes data-bgvideo-fade-in.
`html
`

$3


Example
`javascript
$.fn.bgVideo.defaults.fadeIn = 5000;
$.fn.bgVideo.defaults.showPausePlay = false;
``