Video controls:
Play | Pause | Volume Up | Volume Down | Mute

jQuery tubular

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way.

$(page content wrapper element).tubular(options);

Tubular's hello, world

Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load:

$('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});

and Presto! ... kittens in your website background!

A word of caution

Tubular does not design your website for you. It works here thanks to alpha transparency on these gray boxes and the png logo on the top left. I built tubular thinking it would help experienced web designers and developers add some subtle background elements — emphasis on subtle — to their work. I'm sure there are some tasteful ways to use tubular and many, many more not so tasteful ways to use it. With great power comes great responsibility. The kitten example above is not to be taken seriously! :-)

Options and defaults

  • ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed
  • videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
  • mute: true
  • repeat: true
  • width: $(window).width() // no need to override
  • wrapperZIndex: 99
  • playButtonClass: 'tubular-play'
  • pauseButtonClass: 'tubular-pause'
  • muteButtonClass: 'tubular-mute'
  • volumeUpClass: 'tubular-volume-up'
  • volumeDownClass: 'tubular-volume-down'
  • increaseVolumeBy: 10 // increment value; volume range is 1-100
  • start: 0 // starting position in seconds