Fixing chrome bug with hero video

3 files changed, 23 insertions, 16 deletions

diff --git a/src/templates/templates/index-hero.ftl b/src/templates/templates/index-hero.ftl
index 0bbd7c9..023475a 100644
--- a/src/templates/templates/index-hero.ftl
+++ b/src/templates/templates/index-hero.ftl
@@ -1,5 +1,5 @@
 <div id="hero">
-    <video width="711" height="400" poster="${staticRoot}/images/grow-poster.png" autoplay="autoplay">
+    <video id="herovideo" width="711" height="400" poster="${staticRoot}/images/grow-poster.png" controls="controls" autoplay="autoplay">
         <source src="http://foursquaregrow.s3-website-us-east-1.amazonaws.com/grow-hero.mp4" type="video/mp4" />
         <source src="http://foursquaregrow.s3-website-us-east-1.amazonaws.com/grow-hero.webm" type="video/webm" />
         <img src="${staticRoot}/images/grow-poster.png" alt="Grow Process" />
diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index a79465c..6571273 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -37,21 +37,23 @@ $(document).ready(function()
     });
 
     var previousAnswer = $("#answerField").val();
-    if (!isNaN(previousAnswer)) {
-        var range = $('.sliderQuestion .sliderbar').width() - 46;
-        var left = previousAnswer * range - range / 2;
-        $('.sliderQuestion .slider').css('left', left);
-    } else {
-        var index = previousAnswer.indexOf(',')
-        if (index != -1) {
-            var x = previousAnswer.substr(0, index);
-            var y = previousAnswer.substr(index + 1);
-            if (!isNaN(x) && !isNaN(y)) {
-                var posX = x * 125 + 125;
-                var posY = -y * 125 + 125;
-                $('.quadQuestion .selector').css({left:posX,top:posY});
-            }
+    if (previousAnswer != undefined) {
+        if (!isNaN(previousAnswer)) {
+            var range = $('.sliderQuestion .sliderbar').width() - 46;
+            var left = previousAnswer * range - range / 2;
+            $('.sliderQuestion .slider').css('left', left);
+        } else {
+            var index = previousAnswer.indexOf(',')
+            if (index != -1) {
+                var x = previousAnswer.substr(0, index);
+                var y = previousAnswer.substr(index + 1);
+                if (!isNaN(x) && !isNaN(y)) {
+                    var posX = x * 125 + 125;
+                    var posY = -y * 125 + 125;
+                    $('.quadQuestion .selector').css({left:posX,top:posY});
+                }
 
+            }
         }
     }
 
@@ -69,6 +71,11 @@ $(document).ready(function()
             e.target.src = url.replace('-hover.jpg', '.jpg');
         }
     });
+
+    var video = document.getElementById("herovideo");
+    if (video != null) {
+        video.removeAttribute("controls");
+    }
 });
 
 function notice(msg)
diff --git a/web/style.css b/web/style.css
index 17c1a21..17489f9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -101,7 +101,7 @@ nav.primary a.current {
 }
 
 #hero {
-    background: #2a2d2a no-repeat top center;
+    background: #2b2c2b no-repeat top center;
     width: 100%;
     color: white;
     text-align: center;