[js] Youtubeプレイヤーのクリックイベント登録

あるミュージシャンのサイトでsoundManagerを使って音楽を再生できるようにした。
ページによってはYouTubeが貼られてあるページがあって、YouTubeを再生する時にはBGMは停止することになった。

iPadやらも対象になっているのでYouTubeはiframeで埋め込んでる。
当然iframe内はYouTubeのドメインになっているので、JavaScriptで中を覗くことも、プレイヤーにクリックイベントを登録することもできない。

do ->
 # iframeがひとつしかない状態でしか確認してないので、複数ある場合は要注意
 $iframes = $('iframe')
 $ytFrames = $iframes.filter ->
  # facebookのiframeなどもあるのでsrcをチェック
  if this.src.indexOf 'youtube.com' != -1
   srcParts = this.src.split '/'
   id = srcParts.pop().split('?')[0]
   # YoutubeのAPIで使用するので、動画IDを保存しておく
   this.setAttribute 'data-movieid', id
   # iframeを作り変えるので、その格納用divを作成＆挿入
   $(this).after '
'
   return true

 # youtubeのiframeがなければやめる
 if $ytFrames.size() == 0
  return

 #　後々取得しやすいyにクラス名追加
 $ytFrames.addClass 'js-yt-frame'

 # ここはドキュメントに書いてあった。iframeのAPIを使用するために必要なscriptを読み込む
 tag = d.createElement 'script'
 tag.src = 'https://www.youtube.com/iframe_api'
 $('head').append tag

# scriptが読み込まれると、この名前の関数が呼ばれる
@onYouTubeIframeAPIReady = ->
 # 判別用につけたクラス名で取得
 $ytFrames = $('.js-yt-frame')
 $ytFrames.each ->
  $this = $(this)
  # 既存のiframeを新しく作るものと置き換えるので一旦非表示
  $this.hide()
  frame = this
  movieId = frame.getAttribute 'data-movieid'
  #　APIにあるオブジェクトをnew。これでiframeが作られる
  player = new YT.Player 'ytframe-' + movieId,
   # 幅・高さともに200px以上ないと再生できないので、最低値を設定
   width: Math.max(frame.getAttribute('width'), 200)
   height: Math.max(frame.getAttribute('height'), 200)
   videoId: movieId
   events:
    onReady: (e)->
     # もともとあったiframeを削除
     $this.remove()
    onStateChange: (e)->
     # クリックイベント登録
     if e.data == YT.PlayerState.PLAYING
      # 動画が再生状態になった場合の処理
      # 今回はここでsoundManagerを止めた。

     # もちろん停止状態になったら…とかも可能

参考サイト： YouTube Player API Reference for iframe Embeds(英語)