Rif.3rd » lightbox http://rikaizm.com I love Wordpress Wed, 25 Aug 2010 15:53:16 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 Lightbox for videos http://rikaizm.com/articles/web/lightbox-for-videos.html http://rikaizm.com/articles/web/lightbox-for-videos.html#comments Thu, 19 Apr 2007 15:39:51 +0000 Rika http://rikaizm.com/2007/04/20/lightbox-for-videos/ VideoYoutube, Metacafe, Google Video, iFilm, custom flashの動画を lightbox で、ページ移動すること無く表示できるというので、右図サイトにさっそく導入しましたmemo。
おしゃれなiPodのCMの動画を集めてみました。Taggeratiもちゃんと動いてるよ(しつこい)
Rif.tube » iPod and iTunes Video

やはり、動画をそのまま表示すると、AJAXで何か（検索結果とか）を表示して重なった場合、動画が上に来て見えなくなってしまうので、その点でも助かりました。
ページ移動無く動画を観ることができるって、とってもイイ！

Download

Usage

  • ダウンロードしたフォルダの中のcss, jsフォルダをそれぞれ使用テーマにcss, jsのフォルダを作りアップロード（WP用のプラグインでは無いのでどこにアップロードしても構わないんですが、一応使用テーマへ入れてみました。）
  • videobox.cssの最初のbody {margin: 0;}を削除する。

headerへ

[sourcecode language='HTML']


[/sourcecode]
CSSは、使用テーマのスタイルシートに書き足すか、上記のように読み込む。

あとは表示したい動画のURLにrel="vidbox"を付けるだけ。
[sourcecode language='HTML']
our video
[/sourcecode]
WP-AddQuicktag (de)に登録しておくと楽です。
titleはLightbox表示されたときに右下に表示されます。

ただ、これだと、自分でサムネルを用意して、それにリンクを張る形になります。
自動でサムネイルも作ってくれるといいなー。

サムネイルはイメージ検索で適当なのを見つけるか、YouTube動画のサムネイル(静止画)出力ツール - TubeFire.comなんかを利用させてもらったり、キャプチャにウォーターマークなんか付けて超オリジナルに表示することもできますね。

逆にウォーターマークが無いとただのサムネイルで、まさか動画だとは気づかないかも。
ゆっくり考えます。その間にWPのプラグインになっちゃったりしますように :kopete006:

]]> http://rikaizm.com/articles/web/lightbox-for-videos.html/feed 4