システム開発担当の読です。

どこに行ってもサッカーの話でもちきりです。
小学校のスポーツ少年団の時に居た、サッカーをまるで知らない親御さん
のような人がたくさん居て、面白いですね。


このページでも採用されている、画像をかっこよく表示する「Lightbox」
私も個人でページを作っているので、かなり重宝しているのですが、
「Lightbox」では動画は対応していないようなので、探してみると、
「VideoBox」と「MediaBox」というライブラリがありました。

「VideoBox」はFlashムービーのみの表示しか行えないので
「MediaBox」を使用した動画表示を紹介したいと思います。

MediaBoxの導入

こちらのページより、以下の画像の赤い囲みのファイルをダウンロードしてください。

mediaboxHP

ダウンロードした状態では「mediaboxAdvanced Image Pack」の中身が「images/画像」となっているため「images/mediabox/画像」となるように、フォルダを作成しておいてください。

※「mediaboxAdvBlack.css」の中で「images/mediabox/」と指定されているため(「mediaboxAdvBlack.css」を変更しても可能)

MediaBoxの使用

以下の例のように入力するだけで、使用可能です。。。簡単ですね。

<head>
 <link rel="stylesheet" href="mediaboxAdvBlack.cssの場所" type="text/css" />
 <script type="text/javascript" src="mootools-1.2.4-core-yc.jsの場所"></script>
 <script type="text/javascript" src="mediaboxAdv-1.2.4.jsの場所"></script>
</head>
<body>
 動画を「LightBox」の効果で表示する。<br />
 <a href="動画ファイル場所" rel="lightbox[高さ 幅]">サンプル1</a>
</body>

「lightbox[高さ 幅]」ですが、昔のバージョンでは「mediabox[高さ 幅]」
と指定していたので、参考ページを見る際、注意してください。

sample