Revert "Embed the youtube video instead of the subtle image" (#645)

static/sass/_patterns_hero-video.scss

@@ -0,0 +1,27 @@
+@mixin maas-p-hero-video {
+  .p-hero-video {
+    &__video-container {
+      display: none;
+      margin-top: 0;
+    }
+
+    &__link.is-playing {
+      display: none;
+
+      ~ .p-hero-video__video-container {
+        display: inherit;
+      }
+    }
+
+    &__link {
+      display: block;
+      position: relative;
+    }
+
+    &__play {
+      position: absolute;
+      right: calc(50% - 36px);
+      top: calc(50% - 36px);
+    }
+  }
+}

static/sass/main.scss

@@ -10,11 +10,13 @@ $increase-font-size-on-larger-screens: false;
 @import "@canonical/cookie-policy/build/css/cookie-policy";
 
 // patterns
-@import "patterns_strips", "patterns_lists", "patterns_modal",
-  "patterns_takeunders", "patterns_tables", "patterns_contact-modal",
-  "layout_docs", "patterns_sidenav", "hljs", "patterns_tutorials";
+@import "patterns_strips", "patterns_hero-video", "patterns_lists",
+  "patterns_modal", "patterns_takeunders", "patterns_tables",
+  "patterns_contact-modal", "layout_docs", "patterns_sidenav", "hljs",
+  "patterns_tutorials";
 
 // patterns
+@include maas-p-hero-video;
 @include maas-p-lists;
 @include maas-p-modal;
 @include maas-p-takeunders;

templates/index.html

@@ -7,7 +7,7 @@
 {% block content %}
 <section class="p-takeover--dark">
   <div class="row">
-    <div class="col-6">
+    <div class="col-7">
       <h1>Very fast server provisioning for your data centre</h1>
       <p>Self-service, remote installation of Windows, CentOS, ESXi and Ubuntu on real servers turns your data centre into a bare metal cloud.</p>
       <p>Welcome to metal-as-a-service.</p>
@@ -20,11 +20,26 @@ <h1>Very fast server provisioning for your data centre</h1>
         <a href="https://snapcraft.io/maas"><img src="https://assets.ubuntu.com/v1/24140745-snap-store-badge-light-en.svg" alt="Get MAAS from the Snap store" style="height: 37px" /></a>
       </p>
     </div>
-    <div class="col-6 u-hide--small">
-      <div class="u-embedded-media">
-        <iframe width="560" height="302" src="https://www.youtube.com/embed/eHfaiKlUYsM?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <div class="col-5 p-hero-video u-hide--small">
+      <a href="#" aria-label="Watch the MAAS video on YouTube" class="p-hero-video__link" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Video', 'eventAction' : 'Play', 'eventLabel' : 'Watch the MAAS video' });">
+        <img src="https://assets.ubuntu.com/v1/45146a8e-play-icon--white-on-black.svg" alt="" class="p-hero-video__play">
+        <img src="https://assets.ubuntu.com/v1/b5aa999c-servers-illustration.png" alt="" class="u-no-margin--top">
+      </a>
+      <div class="p-hero-video__video-container u-embedded-media">
+        <iframe class="p-hero-video__video u-embedded-media__element" width="640" height="480" src="" frameborder="0" allowfullscreen=""></iframe>
       </div>
     </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        var videoLink = document.querySelector('.p-hero-video__link');
+        var video = document.querySelector('.p-hero-video__video');
+        videoLink.addEventListener('click', function (e) {
+          e.preventDefault();
+          this.classList.add('is-playing');
+          video.src = 'https://www.youtube.com/embed/eHfaiKlUYsM?autoplay=1';
+        });
+      });
+    </script>
   </div>
 </section>