Wordpress

YouTubeをポップアップウィンドウで表示するプラグイン Lightbox Plus ColorBox

2015/09/28

YouTubeの動画を別ウィンドウで表示したい。

複数のYoutube動画を紹介する時に、すべてを埋め込むと、ページが長くなってしまいます。
また、URLリンクを貼るだけでは、ウィンドウが増えるだけでなく、別サイトへ離脱される可能性も増えてしまいます。
そこで今回ご紹介するのが
ページを離脱させることなく、ポップアップウィンドウで動画や画像を表示させるプラグイン
Lightbox Plus ColorBoxです。 画像のポップアップはこちらを参考にしてください
ポップアップの例

ポップアップウィンドウで表示する

こちらのサンプルをクリックしてご覧ください。 サンプル動画
画像リンク↓
悩んだ時は”セクシー”に考えよう画像をクリックするとポップアップウィンドウが開き、Youtube動画ウィンドウが開きます。閉じる場合は、[閉じる」をクリックするか、ポップアップ以外の場所をクリック もしくは「ESC]キーを押します。

Lightbox Plus ColorBox 使い方

プラグイン 新規追加 をクリックし、検索窓に「Lightbox Plus ColorBox」と入力し検索します。以下のようなプラグインが見つかったらインストールします。
Lightbox Plus ColorBox 使い方
インストールが終了したら、[有効」をクリックします。

Lightbox Plus ColorBoxの設定

有効化ができたら、ポップアップウィンドウのデザイン、動きを設定します。
外観をクリックすると、Lightbox Plus ColorBoxのメニューがあります。
Lightbox Plus ColorBox 設定

基本設定一般項目

Lightbox Plus Colorbox - Base Settings項目の「General」タブの設定です。 
Lightbox Plus ColorBoxの設定
Lightbox Plus Colorboxでは画像と動画のポップアップ表示ができますが、動画を表示させるためにはUse Secondary Lightboxを使います。チェックを入れておきます。
Hide "About Lightbox Plus Colorbox"にチェックを入れておくとトップに表示されるAbout Lightbox Plus Colorboxが表示されなくなります。

基本設定 スタイル

ポップアップのスタイルを選択します。現在ポップアップスタイルでは×印(Close)ボタンが作動しないものがあります。おすすめは「FancyPants」「Shadowed」「ShadowFax」です。
Lightbox Plus Colorbox 設定

動画ポップアップの設定

動画と画像どちらもポップアップ表示できますが、動画をポップアップさせるためには、Secondary Lightbox Settingsで設定を行う必要があります。
Lightbox Plus Colorbox - Secondary Lightbox Settingsを表示します。
Secondary Lightbox Settings
表示する動作の設定では Fade、Elastic、Noneから選択します。スピード調整は1秒=1000という値なので300は0.3秒となります。
ポップアップ時の背景の不透明度はお好みで調整しましょう。 事前に画像を読み込むにチェックを入れておきます。
sizeタブ
ポップアップウィンドウの表示サイズです。お好みで調整可能(まずは初期設定でお試しください)。
Postiton タブ
ポップアップウィンドウが表示される位置です。初期設定では元ウィンドウの真ん中に表示されます(まずは初期設定でお試しください)。
Interface タブ
インターフェース
ウィンドウを閉じる時などのインターフェースの設定です。
Close image text サンプルでは 「Close」を「閉じる」に変更してみました。
図のようにチェックを入れておきましょう。
Other タブ
Other タブ
投稿時に必要となるClass名の設定です。 Use iFrameにはチェックを入れておきます。

全ての設定ができたら「SAve all Setings」をクリックして保存します。
保存

画像をポップアップ表示する方法

投稿の手順は
1:YOUTUBEの共有からURLコードをコピーする
YOUTUBEコード

リンクする動画から「共有」-->「埋め込みコード」をクリック コードをコピーします。

コピー:<https://www.youtube.com/embed/PdsrBv4xYXY?rel=0
これを以下のようにテキストにリンクさせます
<a href="https://www.youtube.com/embed/PdsrBv4xYXY?rel=0" class="lbp_secondary">ポップアップ動画</a>
class="lbp_secondary"> をリンクに付けることでポップアップに表示されます < >を半角英数にすると このようなポップアップ動画ができます。 <class="lbp_secondary">はOTHERタブで設定したクラス名です。

画像のポップアップは
<a href="https://www.youtube.com/embed/PdsrBv4xYXY?rel=0" class="lbp_secondary"><img class="alignleft wp-image-2195 size-thumbnail" src="http://www.webdemo.jp/db/wp-content/uploads/2015/04/2178-80x80.jpg" alt="サンプル動画" width="80" height="80" /></a>
<a href="https://www.youtube.com/embed/PdsrBv4xYXY?rel=0" class="lbp_secondary"><img src=画像ファイル /></a>
というタグになります。< >を半角英数にするとこんな感じです。
サンプル動画

YouTube以外の動画もポップアップ可能です。

iflameで出力した動画のURL部分に<class="lbp_secondary">を付けてリンクを作成すれば他の動画サービスも同様にポップアップで表示できます。

Vimeoの動画例
<iframe src="https://player.vimeo.com/video/73078946?color=ff0179&title=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

vimeoの動画です

vineの動画例

vineの動画は?

いかがでしょうか? 皆様のコンテンツ作成にお役にたてれば幸いです。 Lightbox Plus Colorbox
プラグインのインストールは自己責任で行ってください。

参考:自動でポップアップウィンドウを開く。Wordpressのプラグイン

-Wordpress
-, , , , , , ,

おすすめコンテンツ

1
iPhone動画作成講座 一生使える動画スキルを身につける

仕事で使える動画が誰でも作れるようになります この講座のメリットは短時間で「仕事 ...

2
動画マーケティング 動画で集客 カスタマイズサービス

動画を活用して集客したい方に このサービスは、 動画を使って集客したいけど、何か ...

3
動画マーケティングとは? 第1回 (全4回)

動画マーケティングとは何なのか? 動画マーケティングのカテゴリーには多くの記事を ...

4
動画を使った集客法 メールマガジンのご案内

中小企業のウェブ集客に自社メディアを活用する方法 「他と同じことをやって他よりも ...

5
当社の実績と選ばれる理由

株式会社ウェブデモについて 2003年より海外パソコンソフトの翻訳販売を開始。動 ...