YouTube動画を同一ページ内で表示する「Videobox」

YouTube動画を同一ページ内で表示する「Videobox」というJavascriptとかAjaxですね。

YouTubeなどの動画共有の動画を貼り付けすぎると、ページが重くなって開きにくくなります。

Tomoはそれをテキストリンクを多用してましたが、分かりづらくなるという欠点が。

このスクリプトを利用すると、一つのページで動画を見る事が出来ますし、サムネイル的に見やすく整理して公開も出来ますね。

なにより、開くまで動画を読み込みませんから、かなり軽いはずです。
状況を見つつ、ここでも使うかを検討していきたいと思います。

Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm】[公式][ダウンロードサイト]

現在、試験的に【芸能ニュース掲示板】にて設置を試みていまして、順当に作業は進んでいます。

YouTube動画を同一ページ内で表示する「Videobox」
Lightbox風にムービーを表示する「Videobox」

ダウンロードしたら以下のタグを貼り付けます。リンク先などは状況によって書き換える必要があります。

<link rel=”stylesheet” href=”css/videobox.css” type=”text/css” media=”screen” />

<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>

ちなみに、他にJavascriptを利用すると競合してしまうのか、エラーが発生して困ってしまいます。

他の方で解決策として、下の</body>の前あたりに書き込む事でエラーを防ぐ事が出来るようです。

:: 872 Blog | Videobox を導入してみた ::
:: 872 Blog | Videobox でエラー発生 ::

テキストなら以下のように rel=”vidbox”を追加し、 title=””に題名を書いておくと、クリック後にそれぞれ表示されるようになります。

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

大きさを変えたい場合は rel=”vidbox 800 600″のように数字の追加で出来るようですね。

今後どうなるかが問題ですが、以前に紹介されていたダウンロードサイトのリンク先が、別のページに変貌していて問題視されていた方もいらっしゃいましたので、そちらをあわせて載せておきます。

動画自体がどうにかなる事は絶対無いですが、リンク先が変わってしまうのはちょっとナンセンスですねぇ。

『YouTube動画を同一ページ内で見るためのAjax』というリンク先がアダルトなサイトに変貌。リンクを貼った国内ブロガーは要注意*ホームページを作る人のネタ帳

正式のダウンロードサイト
『YouTube動画を同一ページ内で見るためのAjax』のスクリプトはこちらから手に入れましょう。
—–
EXCERPT:

Related Posts Plugin for WordPress, Blogger...