proof of concept for video hero, ref #14

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

@@ -0,0 +1,77 @@
+// the real thing
+function HeroVideo(elm) {
+    var heroVideo = $(elm || '.hero-video__video').get(0);
+    var minWidth = 768;
+
+    var pause = function() {
+        heroVideo.pause();
+    };
+
+    var play = function() {
+        if (heroVideo.paused) {
+            if (heroVideo.readyState < 4) {
+                heroVideo.load();
+            }
+            heroVideo.play();
+        }
+    };
+
+    var enable = function() {
+        $(heroVideo).addClass('enabled');
+    };
+
+    function supportsVideoFormat(video, fmt) {
+        return video && (video.canPlayType('video/' + fmt) !== '');
+    }
+
+    function isHTML5VideoSupported() {
+        if (supportsVideoFormat(heroVideo, 'mp4') ||
+            supportsVideoFormat(heroVideo, 'webm')) {
+
+            $.each(['playing'], function(_, eventName) {
+                heroVideo.addEventListener(eventName, enable);
+            });
+
+            return true;
+        }
+    }
+
+    // Check window width helper
+    function isWide() {
+        return $(window).width() >= minWidth;
+    }
+
+    function updateVideoState() {
+        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

@@ -20,25 +20,29 @@ $menu-height-md: 73px;
 
     .logo--full {
         fill-opacity: .8;
-        margin: auto;
+        margin: 0 auto;
         max-width: 31em;
-
-        @media ($screen-sm) {
-            margin-top: -$menu-height-md;
-            margin-bottom: ($spacer * 2);
-        }
     }
 
     .section-title {
-        margin-bottom: $spacer;
+        color: #fff;
 
         &:after { display: none }
     }
 
     .btn {
         color: #fff;
-        margin-top: ($spacer * 4);
         opacity: .8;
+        position: absolute;
+        bottom: ($spacer * 3);
+        left: 0;
+        right: 0;
+        width: 100%;
+        display: none;
+
+        @media ($screen-lg) {
+            display: block;
+        }
 
         &:hover,
         &:focus { opacity: 1; }
@@ -86,3 +90,58 @@ $menu-height-md: 73px;
     position: relative;
     z-index: 1;
 }
+
+
+//
+// Video hero
+//
+.hero-video {
+    background: #000;
+
+    &:before { display: none; }
+}
+
+.hero-video .menu,
+.hero-video__content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 1;
+}
+
+.hero-video__content {
+    bottom: 0;
+    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
+    background: url('../img/hero-video-poster.jpg') no-repeat center center;
+    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/_assets/styles/bigchain/_media.scss

@@ -3,3 +3,46 @@
     max-width: 100%;
     height: auto;
 }
+
+
+//
+// Responsive video
+//
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 35px;
+    height: 0;
+    overflow: hidden;
+
+    > iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+//
+// Responsive iframe
+//
+iframe {
+    max-width: 100%;
+}
+
+.iframe-container {
+    position: relative;
+    padding-bottom: 75%;
+    height: 0;
+    overflow: hidden;
+
+    > iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

_src/_includes/hero-video.html

@@ -0,0 +1,29 @@
+<header class="hero hero-video">
+
+    {% include menu-main.html %}
+
+    <div class="hero__content hero-video__content row">
+
+        <hgroup>
+            <svg class="logo logo--full" aria-labelledby="title">
+                <title>Logo</title>
+                <use xlink:href="/assets/img/sprite.svg#logo"></use>
+            </svg>
+
+            <h1 class="section-title">{{ page.tagline }}</h1>
+        </hgroup>
+
+
+        <a href="#features" class="btn btn-link btn-sm">Learn More <svg class="icon">
+            <use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
+        </svg></a>
+    </div>
+
+    <div class="hero-video__background">
+        <video class="hero-video__video" loop autoplay>
+            <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>
+    </div>
+
+</header>

_src/index.html

@@ -4,11 +4,11 @@ layout: base
 front_page: true
 
 tagline:    'Meet Bigchain, the world’s most scalable blockchain'
+
+hero_video_name: northern-light
 ---
 
-<header class="hero">
-
-    {% include menu-main.html %}
+{% include hero-video.html %}
 
     <div class="section">
         <div class="hero__content row">

gulpfile.js

@@ -223,6 +223,15 @@ gulp.task('fonts', function() {
 });
 
 
+//
+// Copy Videos
+//
+gulp.task('videos', function() {
+    return gulp.src(SRC + '_assets/videos/**/*')
+        .pipe(gulp.dest(DIST + 'assets/videos/'));
+});
+
+
 //
 // Revision static assets
 //
@@ -280,6 +289,7 @@ gulp.task('default', ['build', 'server'], function() {
     gulp.watch([SRC + '_assets/javascripts/**/*.js'], ['js', browser.reload]);
     gulp.watch([SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}'], ['images', browser.reload]);
     gulp.watch([SRC + '_assets/images/**/*.{svg}'], ['svg', browser.reload]);
+    gulp.watch([SRC + '_assets/videos/**/*.{mp4,webm}'], ['videos', browser.reload]);
     gulp.watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './_config.yml', SRC + '_includes/svg/*'], ['build', browser.reload]);
 });
 
@@ -299,7 +309,7 @@ gulp.task('build', function(done) {
     runSequence(
         'clean',
         'jekyll',
-        ['html', 'css', 'js', 'images', 'fonts', 'svg'],
+        ['html', 'css', 'js', 'images', 'fonts', 'videos', 'svg'],
         'rev',
         'rev:replace',
         done