Lightboxのビデオ版「Videobox」

記事内にプロモーションを含む場合があります。

videobox.webp
Videobox: Lightbox for videos
Youtube, Metacafe, Google Video, iFilmの動画をLightboxで観覧できるスクリプト。

導入

解凍してvideoboxフォルダごとアップロード。
head内に以下のタグを入力。

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

あとはYouTubeなどの動画URLのリンクに rel=”vidbox” を追記すると使用できます。titleで表示されるテキストを指定。

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

また、rel=”vidbox” の部分を rel=”vidbox 640 480″ などにすることで動画サイズを指定できます。

バージョン0.9を使った感想

幅の狭いサイトで大きいサイズの動画を貼れるのは良いと思う。ただ、サイトのフッターの下にスペースができてしまうのが気になります。

(via mootools forums)