YouTube動画をポップアップ＠jQueryプラグインprettyPhoto

動画（YouTube）をモーダルウィンドウでポップアップ表示させる必要があったので、そのメモ。

使ったのはlightboxクローンのjQueryプラグイン「prettyPhoto」です。

ライセンスはCreative Commons Attribution 2.5ということで、商用利用も可能のようです。

ダウンロードは前述のURLにある「Download」の三つのボタンのうちから選びます。

今回はとりあえず試用してみたいのでCompressedのProduction versionを選択。

ダウンロードしたzipファイルを展開し、jsディレクトリ内にあるjquery.prettyPhoto.jsをコピーして、使用したいところへ移動。

jQueryプラグインなのでjQuery本体を先に読み込んでからprettyPhotoも読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>

上記の例ではjQuery本体のパスの指定にプロトコルが省略されて「//」から始まってますが、ローカルで実装している場合はプロトコルを省略しないでください。でないと機能しません。HTML5 Boilerplateなんかだとフォールバックとして

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

こういうふうにしてたりしますね。（障害があってapiのものにアクセス出来なかった場合の対策）

あと、cssファイルも使用するので、先ほど展開して出来たprettyPhotoのディレクトリ内にある「css/prettyPhoto.css」も読み込みます。

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">

これで必要なソースファイルの準備は整いましたので、実際にjQuery prettyPhotoを起動させるスクリプトを追加します。

<script type="text/javascript">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

あとは、動画をモーダルウィンドウでポップアップさせる際にクリックする対象（静止画像として用意したimg要素等）に動画へのリンクを張るa要素にrel属性を「rel=”prettyPhoto”」追加します。

<a href="http://youtu.be/DFZ4BsoUbfk" rel="prettyPhoto" title="a要素のtitle属性に設定した値を表示"><img src="thumb.jpg" width="300" height="400" alt=""></a>

a要素にtitle属性を指定すると、その値（テキスト）がモーダルウィンドウの下部に表示されます。

今回は動画で試用してみましたが、静止画像（スライドショー、イメージギャラリー）やFlashコンテンツ、Vimeo動画、QuickTime動画等にも対応しているようです。詳しくは公式サイトを参照してください。

おまけ

クライアントさんがYouTubeを使うのはいいけど動画再生後に関連動画が出るのがイヤだと言うので調べましたら、ちゃんとそのためのオプションパラメータが用意されてるんですね。

動画URLの後に「?」でパラメータを繋げて追加すれば良いです。

<a href="http://youtu.be/DFZ4BsoUbfk?rel=0">test</a>

あと、モーダルウィンドウのサイズも指定したい場合は、これも動画URLにパラメータを「&」で繋げて追加すればよいです。&width=640&height=460というふうに幅と高さを追加。

<a href="http://youtu.be/DFZ4BsoUbfk?rel=0&width=640&height=460">test</a>

Youtube動画の再生オプションについては以下の記事が参考になりました。ありがとうございます。