自分のホームページで、YouTubeやGoogle Vidoeのサムネイル画像をクリックして、
そのページ内で動画を開く方法 [Videobox]

Videobox: Lightbox for videosは、 YouTubeの等サムネイル画像をクリックするとJavascript(Ajax)によって同じページ内にムービービデオ（動画）をオーバーレイ表示します。 動画は、Metacafe, Google Video, iFilm や custom flash が、対応できます。
Videoboxをダウンロードすれば、これらを実現できます。その幾つかのサンプルを、下のサムネールをクリックしてお試しください。

YouTube
Google Video
YouTube
Metacafe
Custom flash example.
iFILM
Youtube、Google Video等の動画サイトでは、動画のURLとembedコードを公開していますが、ここの法方はURLを利用し、自分のページ上で動画を再生します。 (Videobox is licensed by Faruk Can Bilir - http://www.gobekdeligi.com)
使用方法
ダウンロードしたvideobox_1.1.zipを解凍して、
Videoboxの３つのJSファイルをインクルードするタグを、HEADタグ内に書きます。JSファイルのパスは、置いた場所により適宜変更します。
<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>
 
VideoboxのCSSファイルをインクルードするタグを、HEADタグ内に書きます。CSSファイルのパスは、置いた場所により適宜変更します。
<link rel="stylesheet" href="./css/videobox.css" type="text/css" media="screen" />
 
動画をサムネール画像等で、BODYタグ内の表示したい場所に書きます。
<a href="動画のURL" rel="vidbox" title="キャプション"><img src="サムネール画像URL" width=100 border=0></a>
  • 動画のURL：URLをとるには２つの方法があります。
    ・そのサイトのサムネール上で、右クリックして、「ショートカットのコピー」で、URLをコピーします
    ・そのサイトの再生ページの動画の右にあるURLフィールドのURLをコピーします
  • キャプション：表示される動画の左下に表示されます
  • サムネール画像：そのサイトのサムネール画像をコピーするか直リンクします。サムネールの大きさは、Widthで調整します。
  • 表示される動画画面の大きさを変えたい場合は、relパラメータに大きさ(width height)を指定します。
    例：<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 600 400" title="caption">our video1</a>
 
ページの例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><!--注１フレーム構成で無い場合-->
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=SHIFT-JIS">
<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" />
</head>
<body>
・・・
<a href="http://www.youtube.com/watch?v=TwP9ONlFBf4" rel="vidbox" title="YouTube"><img src="0.jpg" width=100 border=0></a>
・・・
</body>
</html>
（注1）ドキュメントタイプ（HTML4.01 Transitional）を必ず入れてください。 この文を入れないと、動画の表示位置がおかしくなります。
（注2）ブログでも使用できますが、JSファイルやCSSファイルをアップロードできない場合は使用できません。
（注3）フレーム構成のページでは、動作しないようです。
Videoboxのダウンロード
Videobox: Lightbox for videosサイトの「Download　Videobox V1.1」をクリックし ダウンロードします。


Lightbox系メディアビューア（まとめ）
NoビューアーJSフレームワーク画像動画*1動画共有サイト動画Webページスライドシュー備考
1LightboxPrototype●●
2PiroboxjQuery●●推奨
3Videoboxmootools●
4Mediaboxmootools●●●
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、 非JSフレームを選択可 ●●●●●*2推奨
※動画とは、SWF、FLV、MOV、WMV（*1)
※Shadowboxのスライドショーは、画像、動画などなんでも可能（*2）
動画関連サイト内リンク

  最終更新日：2009.1.7