🚧 Site > Header > Add demo

site/src/javascript/Demo.js

@@ -0,0 +1,30 @@
+import speaker from '../assets/videos/speaker.mp4'
+import audience from '../assets/videos/audience.mp4'
+
+export default class Demo
+{
+    constructor()
+    {
+        this.$container = document.querySelector('.js-demo')
+
+        // Speaker
+        this.$speaker = this.$container.querySelector('.js-speaker')
+
+        this.$speakerVideo = document.createElement('video')
+        this.$speakerVideo.src = speaker
+        this.$speakerVideo.height = 300
+        this.$speakerVideo.autoplay = true
+
+        this.$speaker.appendChild(this.$speakerVideo)
+
+        // Audience
+        this.$audience = this.$container.querySelector('.js-audience')
+
+        this.$audienceVideo = document.createElement('video')
+        this.$audienceVideo.src = audience
+        this.$audienceVideo.height = 300
+        this.$audienceVideo.autoplay = true
+
+        this.$audience.appendChild(this.$audienceVideo)
+    }
+}

site/src/javascript/index.js

@@ -1,13 +1,9 @@
-// import speaker from '../assets/videos/speaker.mp4'
+import Demo from './Demo.js'
 
 export default class Site
 {
     constructor()
     {
-        // const $demo = document.querySelector('.js-demo')
-        // const $video = document.createElement('video')
-        // $video.src = speaker
-        // $video.controls = true
-        // $demo.appendChild($video)
+        this.demo = new Demo()
     }
 }

site/src/style/header.styl

@@ -100,14 +100,41 @@ section.header
 
     .demo
         position absolute
-        top 50%
+        top 520px
         left 50%
         width 1px
         height 1px
         background #ffffff
 
-        video
-            background #ff0000
+        .speaker
+            position absolute
+            top -150px
+            left -245px
+
+            .icon
+                position absolute
+                left calc(50% - 20px)
+                top calc(100% + 10px)
+                width 40px
+                height 40px
+                background-image url(../../static/svg/demo-speaker.svg)
+                background-repeat no-repeat
+                background-position center center
+
+        .audience
+            position absolute
+            top -150px
+            left -245px
+
+            .icon
+                position absolute
+                left calc(50% - 20px)
+                top calc(100% + 10px)
+                width 40px
+                height 40px
+                background-image url(../../static/svg/demo-audience.svg)
+                background-repeat no-repeat
+                background-position center center
 
     .get-started-button
         position absolute