refactor the whole video js, ref #14

- make sure video only gets downloaded when needed

_src/_assets/javascripts/bigchain.js

@@ -9,6 +9,7 @@
 
 //=include bigchain/form-earlyaccess.js
 //=include bigchain/form-contact.js
+//=include bigchain/hero-video.js
 
 jQuery(function($) {
 
@@ -19,6 +20,10 @@ jQuery(function($) {
     SmoothScroll.init();
     FormEarlyAccess.init();
 
+    if ($('.hero-video').length > 0) {
+        HeroVideo.init();
+    }
+
     if (!_dntEnabled()) {
         GoogleAnalytics.init();
     }

_src/_assets/javascripts/bigchain/hero-video.js

@@ -1,77 +1,45 @@
-// the real thing
+var HeroVideo = (function(w, d, $) {
-function HeroVideo(elm) {
-    var heroVideo = $(elm || '.hero-video__video').get(0);
-    var minWidth = 768;
 
-    var pause = function() {
+    'use strict'
-        heroVideo.pause();
-    };
 
-    var play = function() {
+    var app, _private, _config
-        if (heroVideo.paused) {
+
-            if (heroVideo.readyState < 4) {
+    _config = {
-                heroVideo.load();
+        heroVideo: $('.hero-video__video').get(0),
+        minWidth: 720 // $screen-md
+    }
+
+    _private = {
+        play: function() {
+            if ( _config.heroVideo.paused ) {
+                if ( _config.heroVideo.readyState < 4 ) {
+                    _config.heroVideo.load();
+                }
+                _config.heroVideo.play();
+                $(_config.heroVideo).addClass('enabled').removeClass('hide');
             }
-            heroVideo.play();
+        },
-        }
+        pause: function() {
-    };
+            _config.heroVideo.pause();
-
+            $(_config.heroVideo).addClass('hide').removeClass('enabled');
-    var enable = function() {
+        },
-        $(heroVideo).addClass('enabled');
+        isWide: function() {
-    };
+            return $(window).width() >= _config.minWidth;
-
+        },
-    function supportsVideoFormat(video, fmt) {
-        return video && (video.canPlayType('video/' + fmt) !== '');
     }
 
-    function isHTML5VideoSupported() {
+    app = {
-        if (supportsVideoFormat(heroVideo, 'mp4') ||
+        init: function() {
-            supportsVideoFormat(heroVideo, 'webm')) {
+            $(window).on('load resize', function() {
-
+                if (_private.isWide()) {
-            $.each(['playing'], function(_, eventName) {
+                    _private.play()
-                heroVideo.addEventListener(eventName, enable);
+                } else {
-            });
+                    _private.pause()
-
+                }
-            return true;
+            })
         }
     }
 
-    // Check window width helper
+    return app
-    function isWide() {
-        return $(window).width() >= minWidth;
-    }
 
-    function updateVideoState() {
+})(window, document, jQuery)
-        if (isWide()) {
-            play();
-        } else {
-            pause();
-            $(heroVideo).removeClass('enabled');
-        }
-    }
-
-    function trackWidth() {
-        $(window).resize(function() {
-            updateVideoState();
-        });
-    }
-
-    if (isHTML5VideoSupported()) {
-        updateVideoState();
-        trackWidth();
-    }
-
-    return {
-        play: play,
-        pause: pause,
-        enable: enable,
-        isWide: isWide,
-        trackWidth: trackWidth
-    };
-}
-
-// fire all the things
-if (HeroVideo().isWide()) {
-    HeroVideo().play();
-}
-HeroVideo().trackWidth();

_src/_assets/styles/bigchain/_hero.scss

@@ -34,13 +34,13 @@ $menu-height-md: 73px;
         color: #fff;
         opacity: .8;
         position: absolute;
-        bottom: ($spacer * 3);
+        bottom: ($spacer * 2);
         left: 0;
         right: 0;
         width: 100%;
         display: none;
 
-        @media ($screen-lg) {
+        @media ($screen-md) {
             display: block;
         }
 
@@ -96,52 +96,41 @@ $menu-height-md: 73px;
 // Video hero
 //
 .hero-video {
-    background: #000;
+    // poster image
-
+    background: $brand-main-blue-dark url('../img/hero-video-poster.jpg') no-repeat center center;
-    &:before { display: none; }
+    background-size: cover;
 }
 
 .hero-video .menu,
 .hero-video__content {
-    position: absolute;
+    @media ($screen-md) {
-    left: 0;
+        position: absolute;
-    right: 0;
+        left: 0;
-    top: 0;
+        right: 0;
-    z-index: 1;
+        top: 0;
+    }
 }
 
 .hero-video__content {
-    bottom: 0;
+    @media ($screen-md) {
-    display: flex;
+        z-index: 1;
-    flex-wrap: wrap;
+        bottom: 0;
-    align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
 }
 
 // video container
 .hero-video__background {
-    @extend .color-overlay;
-    max-height: 100vh;
-
-    &:before {
-        opacity: .5;
-    }
-
     z-index: 0;
 
-    // poster image
+    @media ($screen-md) {
-    background: url('../img/hero-video-poster.jpg') no-repeat center center;
+        max-height: 100vh;
-    background-size: cover;
+    }
 }
 
 // the video itself
 .hero-video__video {
     @extend .img--responsive;
-
-    // smoothly fade in when ready
-    @extend .transition;
-    //opacity: 0;
-
-    &.enabled {
-        opacity: 1
-    }
 }

_src/_includes/hero-video.html

@@ -20,7 +20,7 @@
     </div>
 
     <div class="hero-video__background">
-        <video class="hero-video__video" loop autoplay>
+        <video class="hero-video__video" preload="none" loop>
             <source src="/assets/videos/{{ page.hero_video_name }}.mp4" type="video/mp4">
             <source src="/assets/videos/{{ page.hero_video_name }}.webm" type="video/webm">
         </video>