以前Slimboxの設置を解説しましたが、スクリプトを追加すると
動画もSlimboxと同じように表示することができます。
表示可能な動画はYoutube、 Metacafe、Google Video、iFilm、
オリジナルのflash(.swf)も表示することができます。
JW FLV PLAYERと併用することで、flvファイルの再生も可能になっています。
（注：ニコニコ動画のようにログイン必須の動画サイトからは無理）
表示にはSlimboxのときと同じmootoolsを使います。
こちらのvideoboxは１つのパックの中に必要なもの（js、player）が
全て入っているため、設置がとても簡単なのも魅力です。
【参考元】 ※動作サンプルは最初のサイトにて
・Videobox: Lightbox for videos
・【ハウツー】ゼロからはじめるVideobox - Flashムービーにエフェクト効果
Videoboxの設置法
必要ファイルのダウンロード
１．Download - videobox v1.1 より、videobox_1.1.zipを
ダウンロードします。（SourceForge.netに繋がります）
２．videobox_1.1.zipを解凍します。
videobox
├ js ┬ mootools.js
│ ├ videobox.js
｜ └ swfobect.js
├ css ┬ videobox.css
｜ ├ closelabel.gif
｜ └ loading.gif
└ swf ─ flvplayer.swf
以上のファイルを確認してください。
jsファイルの設置・簡単な使い方
１．「diarypro/skin」フォルダ内に
「js」「css」「swf」３つのフォルダを丸ごと入れてください。
skin
├ js ┬ mootools.js
｜ ├ videobox.js
｜ └ swfobect.js
├ css ┬ videobox.css
｜ ├ closelabel.gif
｜ └ loading.gif
└ swf ─ flvplayer.swf
となっていればＯＫです。
２・header.htmlの<head>～</hrad>内に次のソースを挿入。
<link rel="stylesheet" href="${INFO_URL}skin/css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="${INFO_URL}skin/js/mootools.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/js/videobox.js"></script>
<script type="text/javascript" src="${INFO_URL}skin/js/swfobject.js"></script>３．slimbox風に表示したい動画へのリンクを次のように記述。
<a href="http://www.youtube.com/watch?v=????????????" rel="vidbox" title="動画の説明">Youtube動画ここから</a>
文字のリンクを押すと、動画がslimbox風に表示されます。
titleの中身が説明として動画左下に表示されます。
リンクをサムネイルにしたい場合は、サムネイルの<img ～>を
<a href="URL" rel="vidbox">～</a>で囲ってください。
４．rel="vidbox 800 600" ようにタグに表記すると、
動画のサイズが記入した大きさで固定されます。
rel="vidbox 横幅 高さ"で好きなように設定できます。
自作フラッシュを表示するには
１．Flashファイル（.swf）をファイル１としてアップロードする。
サムネイルを使う場合、画像をファイル２としてアップロード。
２．記事内に次のように記述。
<a href="＄FILE1_path" rel="vidbox" title="ファイル１">＄FILE2</a>
すでにmootoolsをブログに導入済みの場合
MooTools.Packitoというサイトで、現在使っているmootoolsの
依存コンポネートを調べることができます。
使いたいjsファイルをアップロード後、そのjsファイルのURLを記入すると
動かすのに必要なmootoolsコンポネートが一覧表示されます。
【参考元】
・MooToolsの依存コンポーネントをチェックする
（MooTools.Packito） - youmos
それぞれをメモし、あたらしくmootools から必要な分だけ
チェックしてダウンロードすれば、ファイルの重さも節約できます。
はじめから全てにチェックを入れてダウンロードした、という方は
ダウンロードし直さなくともＯＫです。
「diarypro/skin」直下にmootools.jsがある場合、「js」フォルダを
新しく作り、そちらにvideobox.jsらとともに移動させてください。
■通りすがり ... 2008/08/10（日） edit・delete
こんにちわ、初めまして。
JW FLV PLAYERと併用して自作のFLVを
再生したいのですが、宜しければ
手順などを解説して頂けないでしょうか。