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?
1. Include the latest version of jQuery. E.g.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
2. Include jquery.background-video.js
<script src="path/to/jquery.background-video.js"></script>
<video>
as the first child of the element that you want it to be the background for
3. Add a
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.
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 <video>
tag.
4. Call the plugin on the video element
In your main JavaScript file
;
OR
With a data attribute on the video tag
5. (Recommended) include or copy/paste the CSS into your project
Options
Default options
;
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
.
Overriding default options
Example
$fnbgVideodefaultsfadeIn = 5000;$fnbgVideodefaultsshowPausePlay = false;