Youtubeを背景に設定できるjQueryプラグイン tubular の使い方

tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design
要素の背景にYoutube動画を設定出来るjqueryプラグイン「tubular」を紹介します。動画を背景にする方法はいくつかありますが、個人的には今はYoutubeを使うのが一番無難かなーと思います。
あ、ちなみにこのプラグインは最初のままではローカルでは動きません。サーバーにアップするか、ローカルサーバー環境を作るかしないと確認できません。まあjquery.tubular.1.0.jsの133行目あたりをいじれば見れますが…。

用意するもの

用意するものは、公式からダウンロードするjsとjqueryのみです。

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.tubular.1.0.js"></script>

基本的な書き方

使う為の記述はシンプル。まずは背景に動画を設定したい要素を指定します。だいたい、ページ全体を覆っている#wrapperになるんじゃないでしょうか。
必須のオプションはvideoIDのみ。必要に応じてオプションを追加するといいでしょう。

$('document').ready(function() {
  //youtubeのIDを指定します。
  var options = { videoId: 'ここにYotubeIDを'};
  //サンプルではid="wrapper"を指定した要素の背景に動画を設定しています。
  $('#wrapper').tubular(options);
});

基本は上記で動きますが、細かい指定をしたい場合は下記のようにカンマで句切ってオプションをつけていきます。デフォルトの状態は公式から確認できます。デフォルトで音声なし、繰り返しなど背景に動画を使いたいときの設定になっているのでオプションを使うのは稀かもしれません。

  var options = { videoId: 'ここにYotubeIDを', mute: true ,repeat: false };
  $('#wrapper').tubular(options);

以上です。参考になれば。