テキストリンクや画像からのリンクを開くとYouTube動画をポップアップ再生・・・こういう風にするには、Lightbox系のプラグインで行えます。
とにかくすぐに導入するなら「Lightbox 2」と「WP Video Lightbox」がお手軽です。Lightbox 2は設定が要らず、WP Video LightboxはYouTubeのリンクタグに rel=”wp-video-lightbox” を記入するだけ。ですが、WP Video Lightboxは動画の大きさを設定できないようなので、その点ではイマイチなプラグインです。
というわけで、Lightbox系のプラグインで主流となっているのが「Lightbox Plus ColorBox」です。若干の設定が必要になりますが、デザインや大きさが細かく設定できるのでこだわりたい人には最適でしょう。
- Lightbox Plus ColorBoxをダウンロード
- wp-content/plugins にアップロードしてプラグインを有効化
- 外観 > Lightbox Plus ColorBox から設定を行う
Lightbox Plus ColorBoxの設定
初期段階では画像のポップアップ表示もイマイチなので、まず画像の設定を行いましょう。
Base Settingsで表示スタイルを指定。
Primary Lightbox Settings > Size で画像のMax Width, Max Heightを指定。
Primary Lightbox Settings > Interface のOverlay CloseとESC Key Close にチェックを入れて、画像以外の部分をクリックもしくはESCキーでウィンドウを閉じられるようにします。
次に動画の設定を行います。
Base Settingsにある「Use Secondary Lightbox」にチェック。
Secondary Lightbox Settingsが追加されるので、Sizeからポップアップウィンドウのサイズを設定していきます。サイトの大きさに合わせて上手く調節しましょう。
動画のポップアップにはタグの追加が必要です。
Secondary Lightbox Settings > Other にあるSecondary Class Nameというやつがそれです。自分でお好みのタグを設定することもできますが、デフォのタグのままでもかまいません。
YouTubeなら埋め込みコードのURLを使用します。
例：http://www.youtube.com/embed/vj6aFeHwShQ をポップアップで表示するリンクを作りたい場合、以下のようなリンクになります。
<a href="http://www.youtube.com/embed/vj6aFeHwShQ" class="lbp_secondary">YouTube動画をみる</a>
Firefoxのリンクを拡張するMake Linkを使用して出力したタグを、Embed用のURLに書き換えて使うと若干便利になります。