Fix context menu display on giant play button

By hiding and showing the container instead of the button, we make
sure contextmenu clicks go to the video element instead of the
container element.

Closes #422

Change-Id: I42faa3be38657c123932024566780948557ec324

demo/controls.css

@@ -121,7 +121,7 @@
 #pauseButton, #unmuteButton,
 #castButton, #castConnectedButton,
 #rewindButton, #fastForwardButton,
-#giantPlayButton, #bufferingSpinner {
+#giantPlayButtonContainer, #bufferingSpinner {
   display: none;
 }
 

demo/controls.js

@@ -69,7 +69,8 @@ function ShakaControls() {
   this.bufferingSpinner_ = document.getElementById('bufferingSpinner');
 
   /** @private {Element} */
-  this.giantPlayButton_ = document.getElementById('giantPlayButton');
+  this.giantPlayButtonContainer_ =
+      document.getElementById('giantPlayButtonContainer');
 
   /** @private {boolean} */
   this.isSeeking_ = false;
@@ -253,10 +254,10 @@ ShakaControls.prototype.onPlayStateChange_ = function() {
   // Video is paused during seek, so don't show the play arrow while seeking:
   if (this.video_.paused && !this.isSeeking_) {
     this.playPauseButton_.textContent = 'play_arrow';
-    this.giantPlayButton_.style.display = 'inline';
+    this.giantPlayButtonContainer_.style.display = 'inline';
   } else {
     this.playPauseButton_.textContent = 'pause';
-    this.giantPlayButton_.style.display = 'none';
+    this.giantPlayButtonContainer_.style.display = 'none';
   }
 };