lightbox系プラグイン「Shadowbox.js」で、YouTube動画をオプション付きで埋め込む方法。

プラットフォーム関係なく動画を再生させたかったので、YouTubeにアップして見せることになり、その際に利用したlightbox系のプラグイン「Shadowbox.js」の使い方を忘備録としてポストします。

まず、このShadowbox.jsを使うに至った理由ですが、

• 関連動画を表示させない
• 開いてすぐに再生させる
• モーダルウィンドウにて表示

という事をしたいとの依頼だったので、オプションか何かで指定できるものを探しところ、行き着いたプラグインであります。

今回はyoutube動画をモーダルで表示させる用途で使いましたが、動画だけでなく、

1. 複数画像のスライド
2. 外部サイトの表示
3. インラインコンテンツの表示

ということにも対応している、もはや決定版と言っても良い位の非常に使い勝手の良いプラグインです。
プラグインのダウンロードはこちらから

使いたい機能別のファイルをダウンロード出来るようですが、さほどファイルサイズが変わるようでもないので、全部チェックしてダウンロードしても問題無いかと思います。

Shadowbox.jsを使っての動画の埋め込み

とりあえず今回はyoutube動画を埋め込むという用途に限って説明します。

使用準備

まずはダウンロードしたファイルをHTMLヘッダに記述。
ファイルはCSSとJavascript本体の2つだけ。

その下にイニシャライズを記述。

これだけで使う準備は終わりです。

動画とオプションの指定

ここから今回のメイン。
まずは動画を用意。
とりあえず、以前「艦これ」ネタで使った動画を使用してみます。

「埋め込みコード」を取得

右クリックなどで「埋め込みコード」を取得します。

取得した「埋め込みコード」の例。
利用するには src="" の中にあるURLです。

Shadowbox形式でリンク作成

最後に、Shadowboxを使用する形のリンクを作成。

先ほどの埋め込みコードから必要部分（URL）を持ってきます。
さらに、一番最初に挙げた(1)(2)を実現するために、オプションを指定します。

詳しい説明

手順1

埋め込みコードのURL（//www.youtube.com/embed/2pw8J7P0gYM?feature=player_embedded）に、httpを付けて、きちんとしたURLとします。

手順2

URLに再生オプションを記述。

• &autoplay=1
  貼り付けた動画をいきなり再生させたい場合は貼り付けコードに「&autoplay=1」を追加。

• &rel=0
  関連動画をOFFにしたい場合は貼り付け用コードに「&rel=0」を追加。

手順3

rel=""に、shadowboxのオプションを記述。

最終的には以下の様なリンクが出来上がります。

デモ

youtube再生オプション

youtubeの再生オプションは IDEA*IDEA さんがまとめてくれているので、そちらを参照してください。

-Javascript,jQuery
-Lightbox, shadowbox, モーダルウィンドウ