Tweaked inline video behaviour

website/site/layouts/index.html

@@ -16,10 +16,10 @@
           </div>
         {{ end }}
       </div>
-      <div class="hero-graphic">
+      <a href="#" class="hero-graphic">
         <img src="/img/screenshot-editor.jpg" class="responsive"/>
-        <a class="hero-videolink" href="#">&#x25b6; Watch how to get started in just over 2 minutes</a>
-      </div>
+        <span class="hero-videolink">&#x25b6; Watch how to get started in just over 2 minutes</span>
+      </a>
 
     </div>
   </section>

website/src/css/imports/hero.css

@@ -80,7 +80,7 @@
       box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
     }
 
-    a.hero-videolink {
+    .hero-videolink {
       display: block;
       text-align: center;
       margin-top: $micro;
@@ -90,11 +90,17 @@
       color: white;
       background-color: rgba(255,255,255,0.1);
       border-radius: $borderRadius;
+      transition: 0.1s;
     }
-    a.hero-videolink:hover {
+  }
+  .hero-graphic:hover {
+    .hero-videolink {
       background-color: rgba(255,255,255,0.2);
+      transform: scale(1.03);
     }
-    a.hero-videolink:active {
+  }
+  .hero-graphic:active {
+    .hero-videolink {
       background-color: rgba(255,255,255,0.4);
     }
   }

website/src/js/app.js

@@ -127,7 +127,7 @@ eventInfoLoad();
 // Load inline YouTube video
 var embedcode = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
 
-$('.hero-videolink').click(function() {
+$('.hero-graphic').click(function() {
   $('.hero-graphic img').replaceWith(embedcode);
-  $(this).remove();
+  $('.hero-videolink').remove();
 });