From 52ba3232bea8807228eb19e7a5dc57e42024dbd1 Mon Sep 17 00:00:00 2001
From: Lennart Ziburski <me@lennartziburski.com>
Date: Tue, 27 Feb 2018 00:27:12 +0100
Subject: [PATCH] Inlined Getting Started video

---
 website/site/layouts/index.html  | 3 +--
 website/src/css/imports/hero.css | 3 ++-
 website/src/js/app.js            | 9 +++++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/site/layouts/index.html b/website/site/layouts/index.html
index 2e2ba564..6600085b 100755
--- a/website/site/layouts/index.html
+++ b/website/site/layouts/index.html
@@ -18,8 +18,7 @@
       </div>
       <div class="hero-graphic">
         <img src="/img/screenshot-editor.jpg" class="responsive"/>
-        <a class="hero-videolink" href="https://www.youtube.com/watch?v=p6h-rYSVX90">&#x25b6; Watch how to get started in just over 2 minutes</a>
-        <p>
+        <a class="hero-videolink" href="#">&#x25b6; Watch how to get started in just over 2 minutes</a>
       </div>
 
     </div>
diff --git a/website/src/css/imports/hero.css b/website/src/css/imports/hero.css
index ff77920e..ec1942f0 100644
--- a/website/src/css/imports/hero.css
+++ b/website/src/css/imports/hero.css
@@ -74,7 +74,8 @@
       margin: 0;
     }
 
-    img {
+    img, iframe {
+      width: 100%;
       border-radius: $largeBorderRadius;
       box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
     }
diff --git a/website/src/js/app.js b/website/src/js/app.js
index f8ede71a..d920839b 100755
--- a/website/src/js/app.js
+++ b/website/src/js/app.js
@@ -122,3 +122,12 @@ var eventInfoLoad = function() {
 }
 
 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 img').replaceWith(embedcode);
+  $(this).remove();
+});