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)
- 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
bower install jquery-background-video
npm install --save jquery-background-video
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.
2. Include jquery.background-video.js
3. Add a
<video> as the first child of the element that you want it to be the background for
Note: the class names
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-size, which would be overwritten by the shorthand
iOS Support: Automatic playing of videos is supported as of iOS 10+, but requires the
playsinline attribute on the
4. Call the plugin on the video element
With a data attribute on the video tag
5. (Recommended) include or copy/paste the CSS into your project
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.
Overriding default options
$fnbgVideodefaultsfadeIn = 5000;$fnbgVideodefaultsshowPausePlay = false;