Update landing-page video

Signed-off-by: Alex Ellis (OpenFaaS Ltd) <alexellis2@gmail.com>

Author: alexellis

_includes/landing-page/yt-player/youtube.html

@@ -1,8 +1,10 @@
 <div class="yt-player-container">
     <div class="yt-player-iframe-wrapper">
-        <video id="sample-video" muted loop autoplay poster="{{ site.baseurl }}/images/openfaas/yt-cover.png">
+        <a href="https://www.youtube.com/watch?v=ZnZJXI377ak">
+        <video id="sample-video" muted loop autoplay poster="{{ site.baseurl }}/images/openfaas/yt-cover.jpg">
             <source src="{{ site.baseurl }}/videos/landing-video.mp4" type="video/mp4">
         </video>
+        </a>
         <div id="yt-player-play"></div>
         <div id="yt-player-iframe"></div>
     </div>

images/openfaas/yt-cover.jpg

@@ -56,7 +56,7 @@ function initNavToggler() {
 /*------------Init youtube player modal-------------*/
 /*--------------------------------------------------*/
 
-var videoId = 'LQa8-JvIeWA';
+var videoId = 'ZnZJXI377ak';
 function initVideoModal() {
     var triggers = document.querySelectorAll('.start-demo-video');
 
@@ -109,7 +109,7 @@ function initVideoModal() {
 
 function onYouTubeIframeAPIReady() {
     if (document.body.className === 'landing-page') {
-        landingPlayer = new YT.Player('yt-player-iframe', {
+        document.landingPlayer = new YT.Player('yt-player-iframe', {
             videoId: videoId,
             playerVars: { 'autoplay': 0, 'controls': 1 },
             events: {
@@ -141,7 +141,6 @@ function initYoutubePlayerApi() {
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 }
 
-
 /*------------Init scripts on pageload--------------*/
 /*--------------------------------------------------*/
 document.addEventListener('DOMContentLoaded', function() {

js/main.js

@@ -1,7 +1,7 @@
 /*--------------Initialize youtube api--------------*/
 /*--------------------------------------------------*/
 
-var videoId = 'LQa8-JvIeWA';
+var videoId = 'ZnZJXI377ak';
 var playerControl = document.getElementById('yt-player-play');
 var sampleVideo = document.getElementById('sample-video');
 var play = null;
@@ -10,15 +10,17 @@ var stop = null;
 // landingPlayer is initialized in main.js and set as global variable
 
 function onPlayerReady(event) {
-    console.log('here')
+    console.log('Video player ready')
     event.target.playVideo();
 }
 
 function playVideo() {
-    landingPlayer.playVideo();
-    landingPlayer.f.classList.add('playing');
-    sampleVideo.classList.add('is-hidden');
-    playerControl.classList.add('is-hidden');
+    if(document.landingPlayer) {
+        document.landingPlayer.playVideo();
+        document.landingPlayer.f.classList.add('playing');
+        sampleVideo.classList.add('is-hidden');
+        playerControl.classList.add('is-hidden');
+    }
 }
 
 function initYoutubePlayer() {