jquery-tubular


Description: Youtubeの動画を背景全体にするライブラリです。自動でリピート再生してくれます。なかなかインパクトのある見せ方ですね。
Sample: demo
Tutorial: jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background
License: MIT
WordPress Theme: WP-Tubular

Note

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

まずプラグイン等を読み込んで動画のIDを以下のように指定するだけです。

<script>
$(function(){
    $('body').tubular('2_HXUhShhmY','wrapper');
});
</script>

2_HXUhShhmYがID、wrapperが背景指定するdivに与えたIDになります。

Related snippet :

  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: jQueryを使ってWYSIWYGを構築します。機能としてはやや乏しいですが、これはこれで面白いですね。一応、WYSIWYGの基本的な機能は揃ってい ...
  • Description: Facebookのように、インスタンスサーチから選択後にタグ化出来るプラグインです。大量の選択肢がある場合は、ドロップダウンや入力方式であることが殆 ...
  • Description: キーワードでその場でTwitter検索を可能にするプラグインです。jqueryUIとjQuery Twitter Search Pluginを併用し ...
  • Description: スクロールバーのデザインを変えるプラグインです。Flashではよく見かけたスクロールバーのデザインを全ブラウザで実装できます。デザインにより統一 ...
  • Description: 横幅全体を使ったダイナミックなイメージギャラリーです。IE6以外はかなり素敵な表現が出来そう。アニメーションしながらズームし、そのままスライドショー ...
  • Description: 自動で時系列を崩さない配列を組みます。組み直す際のアニメーションもあります。 Sample: demo Tutorial: ...