[WP] 「Lightbox Plus ColorBox」を使って、YouTube動画をポップアップ表示させる

記事内にプロモーションを含む場合があります。

テキストリンクや画像からのリンクを開くと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の設定

Lightboxplus youtubesetting 00

初期段階では画像のポップアップ表示もイマイチなので、まず画像の設定を行いましょう。

Base Settingsで表示スタイルを指定。
Primary Lightbox Settings > Size で画像のMax Width, Max Heightを指定。
Primary Lightbox Settings > Interface のOverlay CloseESC Key Close にチェックを入れて、画像以外の部分をクリックもしくはESCキーでウィンドウを閉じられるようにします。

Lightboxplus youtubesetting 03

次に動画の設定を行います。
Base Settingsにある「Use Secondary Lightbox」にチェック。 

Lightboxplus youtubesetting 06

Secondary Lightbox Settingsが追加されるので、Sizeからポップアップウィンドウのサイズを設定していきます。サイトの大きさに合わせて上手く調節しましょう。

Lightboxplus youtubesetting 04

動画のポップアップにはタグの追加が必要です。
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>

Lightboxplus youtubesetting 07

Firefoxのリンクを拡張するMake Linkを使用して出力したタグを、Embed用のURLに書き換えて使うと若干便利になります。