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
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