自分のホームページで、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の3つの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をとるには2つの方法があります。
    ・そのサイトのサムネール上で、右クリックして、「ショートカットのコピー」で、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"><!--注1フレーム構成で無い場合-->
<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