fancyBoxでYouTubeの動画を再生する

Pocket
10 interests

fancyBoxでYouTubeの動画を再生する方法を求めて、このブログの以下の記事にたどり着く方が多くいらっしゃいます。
fancyBoxで動画再生ができない場合の対応方法

上記では、おそらく問題解決に繋がらないため、こちらの記事にfancyBoxでYouTubeの動画を再生する方法をまとめておきます。
これは、2013年6月18日現在の情報です。YouTubeで、デザインの変更や、動画利用のポリシーが変更になった場合は、利用できなくなる恐れがあることを予めご留意ください。

環境

環境は以下の通りです。

ソフトウェア

ソフトウェア バージョン
jQuery 2.0.2
fancyBox 2.1.5

fancyBoxでYouTubeの動画を再生する方法

CakePHPでPHPUnitを利用する方法をまとめた動画を素材として、見てみましょう。
PHPUnit and You – By Mark Story

  1. 再生したい動画のページを表示します。今回の例だと、URLは、 http://www.youtube.com/watch?v=QF1NZM360Ucです。
    play-youtube-movie-in-fancybox-01
  2. 動画の下部にあるタブを「概要」から「共有」へ切り替えます。
    play-youtube-movie-in-fancybox-02
  3. 「共有」タブの中のタブを「この動画を共有」から「埋め込みコード」へ切り替えます。
    play-youtube-movie-in-fancybox-03
  4. iframeは、fancyBoxで生成するので、必要ありません。srcアトリビュートの値(URL)だけを選択し、コピーします。
    play-youtube-movie-in-fancybox-04

これで下準備は完了です。要点をあげるならば、 http://www.youtube.com/embed/のあとに、動画のIDを記述すれば良いということです。
あとは、以下のような感じで、fancyBoxのリンクを記述しましょう。

以上で完了です。
デモやソースコード一式は、以下のリンクからどうぞ。

Pocket
10 interests