Wordpressにおける「Videobox」プラグインを作ってみた
by zakki
以前、 「WordPressで簡単にスライドショーができる方法」にて、Lightbox2を紹介させていただきました。
同じような感じで動画も表示できたらいいのになぁなんて思っていろいろ検索しておりますと･･･いいのがありました。
その名も「Videobox」
機能は、GIGAZINEさんの紹介では、
「 画像をクリックすると、背景が暗くなって画面中央に画像がうにょ～んと開く透過レイヤー風効果を加えるのが、かの有名な「Lightbox」ですが、「Videobox」はそのムービー版です。対応しているのはYouTube、Google Video、Metacafe、iFilmなど。自分で作成したFlashも利用できます。」
との事。
Lightboxで静止画 Videoboxで動画という使い方で統一感がでてこりゃいい感じ。
と言うことで、Wordpressのプラグインで探してみるのですが、なかなかございません･･･私の検索方法が悪いのでしょうか？あったとしても何かへんなサイトに跳ばされるし･･･んでやっとこさ見つけました。
そのサイトはaNieto2K
サイトに書いてあるように
プラグインを所定の場所に設置し、管理画面にてVideoboxのプラグインを有効にして
[videobox url="http://www.youtube.com/watch?v=uhi5x7V3WXE" title="300"]Trailer de 300[/videobox]
と入力とインストールを試みたのですが、うまくいきません。なにしろ、このサイト、スペイン語なので私には翻訳難しくて断念です。
ということで、「Lightbox 2 Plugin」の構造を見ながら、私なりに「Videobox Plugin」を作ってみました。
方法は
- ightbox2.php→video2.phpと名前を変える。
- lightbox2.phpをテキストエディタで開いて、「light」を全て「video」に変換する。
- cssとjsファイルがそれぞれcssフォルダ・jsフォルダに入っているので、そのフォルダを指定するようにlightbox2.phpを修正する。※swfフォルダは必要ありません。
以上です。
これを、Wordpressにインストール。
インストール方法は、
- videobox2.phpとvideoboxフォルダを/WordPressインストールフォルダ/wp-content/plugins/にアップロードする。
- 管理画面 -> プラグインから「Videobox JS Plugin」を有効化にする。
あとは記事の投稿の際に、テキストまたは画像にリンクするaタグに
rel=”vidbox”
をつけてやればOKです。
記入例
<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U" rel="vidbox" title="youtube">play YouTube</a>
テキストまたは画像をクリックするとLightbox風Videoboxが動作します。
Demo play YouTube
Videoboxプラグインとlightbox2プラグインを一緒に有効にすると両方とも動作しません。
いろいろ試してみたのですが、どちらか片方を有効にさせるしかありません･･･
どうしても Lightbox2 と衝突するようで併用ができません。
ただ、
- 静止画をスライドショーさせないで、一枚一枚フェードインフェードアウトさせる。
- 静止画をフェードインさせた後の画像サイズを「rel=”vidbox 800 600″」と言う感じに手動で指定する。
Demo
これでもいいなら、Videoboxプラグイン一つでいけます。
というか、だれか早くちゃんとしたVideoboxのプラグイン作ってください。
まぁ、こんなヘナチョコ「Videoboxプラグイン」ですが、欲しい方はこちらから。
Popularity: 41 %
この記事のお役立ち度を評価してください
(2 投票, 平均: 3.5 中 5)
Loading ...ブックマークの追加はこちらから、どうぞ
コメントはまだありません。