OKVideo

OKVideo is a jQuery plugin that allows for YouTube or Vimeo videos to be used as full-screen backgrounds on webpages. OKVideo aims to be customizable while making some basic decisions about how the plugin should control video. When using OKVideo, all videos will be served from Vimeo or YouTube based on a number of variables like browser, device, bandwidth, etc.

OKVideo uses the new YouTube IFrame API which does not require any Flash objects to be present on your website. This means that mobile devices will play video served by OKVideo. Content from Vimeo is served in a similar manner, although sometimes their videos will still be served in Flash.

Tested and working in Safari 5.1+, Chrome, Firefox 3.6+, IE 8+.

Usage

After including jQuery and the OKVideo plugin, instantiate OKVideo like so:

$(function(){
  $.okvideo({ source: '[:id]' }) // [:id] refers to a YouTube or Vimeo ID
}

OKVideo conveniently will accept and parse full urls from YouTube or Vimeo:

$(function(){
  $.okvideo({ source: '[:url]' }) // [:url] refers to a YouTube or Vimeo URL
}

OKVideo accepts a number of options. The below will embed a high definition video from YouTube with the audio set to 50%:

$(function(){
  $.okvideo({ 
      source: '[:url]',
      volume: 5,
      hd: true 
  });
}

You can also simply pass an id or url if no other options are desired:

$(function(){
  $.okvideo('[:url]') // [:url] refers to a YouTube or Vimeo URL
}

Options

option	description	default
source	an id or url from vimeo or youtube	null (required)
disablekeyControl	enable or disable key control (youtube videos only)	true
captions	enable or disable captions (youtube videos only)	false
loop	loop the video	true
high def	control hd playback (youtube videos only)	false
volume	control the volume with an integer from 0 - 100	0
adproof	scale the youtube player larger than the browser to obscure youtube ads	false

Tests

OKFocus tests with Jasmine. Once you've cloned the repo run bundle and then rake jasmine to test the source.