Youtube再生リストのiframe埋め込みのURLをjQueryで取得する
この記事は次のブログに引っ越しました。
Youtubeの埋め込みプレイリストのiframe内の動画URLをjQueryで取得する（Youtube JavaScript API） Youtubeでは作成した再生リスト（プレイリスト）を自分のWebサイトに埋め込めるようにできるのですが、現在どの動画が再生されているのかを調べたい事があると思います。 例えば、お店やイベント会場などで再生リストをプレイしながら動画に合わせた情報を表示したい場合などです。色々な方法があると思いますが、Youtubeのiframe内のURLを取得する方法として本記事を参考にしてもらえればと思います。 一般的には（特にモダンブラウザでは）frameやiframe内に別ドメインのページを表示している場合、 親ページから子ページ（iframe内）のURLを取得することはできません。 ■jQueryで別ドメインへの参照を行った場合のエラー Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://yourdomain.com" from accessing a cross-origin frame これは、Same-Origin Policyのセキュリティ制限によるもので、実際に参照すると上記のようなブラウザのエラーを確認できると思いますが、iframe内の子ページ側で関数を用意してあげれば可能になり、YouTubeのAPIでは専用の関数（メソッド）が用意されています。 ■主なポイント YouTube IFrame APIを使ってYT.PlayerオブジェクトのgetVideoUrl()メソッドを使って、対象のプレーヤーで動画のURLを取得する 下記の34行目に作成した再生リストのID（再生リストを再生した際のURLクエリ内にある"list="の値）を書き換えるだけで、動作するサンプルです。 再生を続けてリストの次の動画が再生されると、URLや動画ID欄も更新されるのを確認してください。 この動画IDをもとに、動画に関する情報や紐付けた情報を表示する事ができます。
