Trigger a pause event when user click Youtube logo

This will make sure that the play button is in the paused state.

Fixes https://www.pivotaltracker.com/story/show/26236143

static/coffee/spec/modules/video/video_player_spec.coffee

@@ -126,6 +126,14 @@ describe 'VideoPlayer', ->
       it 'trigger pause event', ->
         expect('pause').toHaveBeenTriggeredOn @player
 
+    describe 'when the video is unstarted', ->
+      beforeEach ->
+        spyOnEvent @player, 'pause'
+        @player.onStateChange data: YT.PlayerState.UNSTARTED
+
+      it 'trigger pause event', ->
+        expect('pause').toHaveBeenTriggeredOn @player
+
     describe 'when the video is ended', ->
       beforeEach ->
         spyOnEvent @player, 'ended'

static/coffee/src/modules/video/video_player.coffee

 class @VideoPlayer
   constructor: (@video) ->
+    # Define a missing constant of Youtube API
+    YT.PlayerState.UNSTARTED = -1
+
     @currentTime = 0
     @element = $("#video_#{@video.id}")
     @render()
@@ -57,7 +60,7 @@ class @VideoPlayer
     switch event.data
       when YT.PlayerState.PLAYING
         $(@).trigger('play')
-      when YT.PlayerState.PAUSED
+      when YT.PlayerState.PAUSED, YT.PlayerState.UNSTARTED
         $(@).trigger('pause')
       when YT.PlayerState.ENDED
         $(@).trigger('ended')