Videobox

画像をクリックすると、背景が暗くなって画面中央に画像が開く透過レイヤー風効果を加えるのが、有名な「Lightbox」だが、「Videobox」はそのムービー版。YouTube、Google Video、Metacafe、iFilmなどを対象にしているが、自分で作成したFlashも利用できる。ただし、SWFのみで再生ボタンはない。FLVの再生にはJWPlayerを使う。

• Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm
  http://videobox-lb.sourceforge.net/

〔例〕Below, there are Metacafe, Google Video, iFilm and custom flash movie examples.

使い方

１．以下のスクリプトとCSSをHeadセクションに書く

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />

２．ビデオにリンクするAタグにREL属性を下記のように書く。TITLE属性がキャプションになる。

<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">our video</a>