cq5-media.coffee

define ["jquery", "mediaElement", "cq5-flowplayer"], ($, mediaelementplayer) ->
  # boot up flash video
  # legacy first

  # proper HTML5 video and audio player using mediaelement
  # be sure to set the plugin path so that when minified the flash and silverlight plugins
  # are working as fallbacks, specificaly mp3 for FF.
  # Youtube and vimeo component - fluid width video
  init: ->
    console.log "Media Players loaded using jQuery ", $.fn.jquery
    $("#bd").acsMediaEmbed
      enablePlaylist: true
      filetypes: ["flv", "mp4"]

    $("video,audio").mediaelementplayer(pluginPath: "//#{acs.assetDomain}/v2.0/cq5/components/mediaelement/build/")

    videosToResize = $('.vimeoembed')
    # execute immediately
    @resizeVideos(videosToResize)
    @bindResizeableElements(videosToResize)

  bindResizeableElements : (videos) ->
    Harvey.attach "screen and (min-width:753px) and (max-width:850px)",
      on: -> $(window).bind("resize", @resizeVideos(videos))
      off: -> $(window).unbind("resize", @resizeVideos(videos))

  resizeVideos : (videos) ->
    #innocent until proven guilty
    needsResize = false
    $(videos).each ->
      $el = $(@)
      # look for the iframe child and see if is too wide
      if $("iframe", $el).attr("width") > $el.width()
        # we will do something with this knowledge later
        needsResize = true
        # If it's too wide, then make it reponsive
        $(".embed", $el).addClass "fluid"
      else
        # If it's not too wide, remove the fluid row
        $(".embed", $el).removeClass "fluid"

    if needsResize
      $(".columnsBootstrap .row-fluid.balanced [class*=\"span\"]").css("min-height", "auto")
      # Match height on bootstrap multicolumns
      $(".columnsBootstrap").find(".row-fluid.balanced").each ->
        $(@).children("[class*=\"span\"]").css("min-height", "").matchHeights()

cq5-youtube.coffee

define ["jquery", "cq5-media.coffee"], ($ , media) ->

  # example DOM element in youtubes[] - <div data-youtube='{"height": "250", "width": "120" , "playerID" : "uniqueID" ,"videoId" : "amLCDNYDIkk"}'> </div>
  init: (youtubes) ->
    console.log "Youtube loaded using jQuery", $.fn.jquery

    #First, we must load the Youtube API
    $.getScript "https://www.youtube.com/iframe_api"

    # This function is called after the youtube SRC is loaded
    # see https://developers.google.com/youtube/js_api_reference
    window.onYouTubePlayerAPIReady = ->
      #iterate through every youtube data object
      $(youtubes).each ->
        config = $(@).data "config"
        config.disableAutoStart = true if youtubes.length >1 or config.disableAutoStart?
        buildPlayer config
      media.resizeVideos youtubes

    buildPlayer = (config) ->
      console.log "building youtubePlayer -- playerID: #{config.playerID} , height:#{config.height}, width : #{config.width}, videoId : #{config.videoId}"
      
      eventmethods = {}
      eventmethods.onReady = (event) -> event.target.playVideo() unless config.disableAutoStart

      player = new YT.Player(config.playerID,
        height: config.height
        width: config.width
        videoId: config.videoId
        events: eventmethods
      )