• かちびと.net

    自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubularのご紹介です。なかなか良さそうだったのでメモ。Youtube動画を背景に指定させることが可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular

スポンサーリンク

Webサイトの背景をリピート再生するYoutube
の動画にしてしまおう、というjQueryプラグイン
・jquery-tubularのご紹介です。なかなか斬新
では無いかなと思います。ユニークなサイトを
作る際に参考にしたいですね。導入も極めて
簡単なのでぜひチャレンジしてみてください。

jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。

かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。

jquery-tubular


このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。

サンプル作った


面白かったので暇を見て適当にデモサイトを作ってみました。

サンプル

ちょっと重いかな?とは思ったんですが、どうでしょうかね・・
使い方は凄く単純で、以下のようにhead内に記述すればいいだけ。

Step.1

まず、jQueryと、プラグインのパスを記述

<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>

これでプラグインはOKです。

Step.2

次に再生させる動画の指定をします。

$('body').tubular('YoutubeのID','ページ全体を指定しているID名');

先程のサンプルページではページ全体に指定したdivにwrapperというIDを付け、http://www.youtube.com/v/2_HXUhShhmY?fs=1&hl=ja_JPという動画なのでID名である「2_HXUhShhmY」を書きました。

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

完了です。

IE6以外は動作しますので、使いどころも無くはないかなと思います。配布先には動画を止めたり再生させるデモもあるのでチェックしてみてください。プラグインのダウンロードは以下から可能です。

jquery-tubular

URL :
TRB :

Ads

Posts

Contact

Services