LoginSignup
10
9

More than 5 years have passed since last update.

Youtube iframe API を使ったプレイヤー読み込み

Last updated at Posted at 2014-04-04

HTML

<div id="player" data-movieid="動画ID"></div>

CoffeeScript

loadScript =
  (obj)->
    $.ajax(
      url:"http://www.youtube.com/iframe_api/"
      dataType:"script"
      success:
        (data)->
          window.onYouTubeIframeAPIReady =
            ->
              target = obj.target
              id = obj.id
              width = obj.width
              height = obj.height
              loadPlayer(target,id,width,height)
      error:
        (xhr, status, thrown)->
          loadScript()
    )

loadPlayer =
  (target,id,width,height)->
    if !window.ytPlayer
      window.ytPlayer = new YT.Player(target,
        width: width
        height: height
        videoId: id
        playerVars:
          hl:'ja_JP'
          fs:1
          hd:1
          rel:0
          showinfo:0
          autohide:1
          theme:'light'
      )
    else
      ytPlayer.loadVideoById(id)

movie =
  target:$('#player').attr('id')
  id:$('#player').attr('data-movieid')
  width:260
  height:146

loadScript(movie)
10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9