rsBackVid jQuery Plugin

A jQuery plugin to allow a YouTube video to be used as a background for your website.

backVid uses the YouTube Iframe API which does not require any Flash objects to be present on your website. Currently, backVid assumes that as video through the YouTube iFrame API does not play automatically on mobile, it is replaced with either a fixed colour or image of your choosing.

The plugin does it’s best to hide as much of the YouTube UI as possible. It is recommened that you use a video of your own that, so you are able to remove any adverts/popups.

Usage

Download the plugin hereAfter including jQuery and the backVid plugin, instantiate backVid like so:

You can specify the mobile background with the following options:

Testing

Tested on IE8+, Firefox 3.6+, Chrome 15+, Opera 12.5+, Safari 4+

Options

option description default type
videoId An id from YouTube 9d8wWcJLnFI string
mute Whether to play sound with video false boolaen
width Width of the video background window width string
mobileBackgrounType The type of background on mobile Image/Colour colour string
backgroundValue The value of the mobileBackgroundType rgb(0,0,0) string
videoFilter Add a filter over the top of the video (false, lines, bricks, squares, waves, spots, dashes, crosses) false string
start The position to being the video at in seconds 0 int
playButtonClass Specify the CSS class for a play button backVid-play string
pauseButtonClass Specify the CSS class for a pause button backVid-pause string
muteButtonClass Specify the CSS class for a mute button backVid-mute string
unMuteButtonClass Specify the CSS class for an un-mute button backVid-unMute string
volumeUpClass Specify the CSS class to increase the volume backVid-volume-up string
volumeDownClass Specify the CSS class to decrease the volume backVid-volume-down string
increaseVolumeBy The amount to increment/decrement the volume by 10 int

Credits

Dazzling Time-Lapse Reveals America’s Great Spaces – National Geographic

Video:

Mute:


Filter: