My Playground @sydlawrence

HTML5 Powered with Multimedia

About

This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div.

For browsers that don't support the HTML5 video tag, it just uses an image.

Warning

Don't abuse this code... Don't use it too often, too many video instances will slow down the browser.

Please bear in mind bandwidth usage for both you, and your visitors

Browser Support

Video Image
Firefox 4 (the best experience) Yes (webm) Yes
Internet Explorer 9 Yes (mp4) Yes
Firefox 3.5 Yes (ogv) Yes
Chrome Yes (webm/mp4) Yes
Safari Yes (mp4) Yes
Opera 10.5+ Yes (ogv) Yes
Internet Explorer 8 No Yes
Internet Explorer 7 No Yes
Android Browser No Yes
Mobile Safari Does not modify default behaviour
Older Browsers that support position:fixed No Yes
Archaic browsers Does not modify default behaviour

Documentation

$(el).videoBG(options);

options

mp4
required. this is the src for the video
ogv
required. this is the src for the video
webm
required. this is the src for the video
poster
required. this is the src for the img
autoplay
bool
loop
intnumber of times to loop, true if infinite
sclae
bool
position
the css position of the video
opacity
int 0 - 1
textReplacement
bool - used if you are replacing text
zIndex
optional
width
required if textReplacement.
height
required if textReplacement.