diff --git a/_src/_assets/images/hero-video-poster.jpg b/_src/_assets/images/hero-video-poster.jpg new file mode 100644 index 0000000..bed2925 Binary files /dev/null and b/_src/_assets/images/hero-video-poster.jpg differ diff --git a/_src/_assets/javascripts/bigchain/hero-video.js b/_src/_assets/javascripts/bigchain/hero-video.js new file mode 100644 index 0000000..fd8bb81 --- /dev/null +++ b/_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(); diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss index b1594a3..a46eb7c 100644 --- a/_src/_assets/styles/bigchain/_hero.scss +++ b/_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 + } +} diff --git a/_src/_assets/styles/bigchain/_media.scss b/_src/_assets/styles/bigchain/_media.scss index b7587d0..eca43a1 100644 --- a/_src/_assets/styles/bigchain/_media.scss +++ b/_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%; + } +} diff --git a/_src/_assets/videos/northern-light.mp4 b/_src/_assets/videos/northern-light.mp4 new file mode 100644 index 0000000..4085b79 Binary files /dev/null and b/_src/_assets/videos/northern-light.mp4 differ diff --git a/_src/_includes/hero-video.html b/_src/_includes/hero-video.html new file mode 100644 index 0000000..b04d816 --- /dev/null +++ b/_src/_includes/hero-video.html @@ -0,0 +1,29 @@ +
+ + {% include menu-main.html %} + +
+ +
+ + +

{{ page.tagline }}

+
+ + + Learn More + + +
+ +
+ +
+ +
diff --git a/_src/index.html b/_src/index.html index caee145..670f1cf 100644 --- a/_src/index.html +++ b/_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 --- -
- - {% include menu-main.html %} +{% include hero-video.html %}
diff --git a/gulpfile.js b/gulpfile.js index 585c9e9..f0a60fc 100644 --- a/gulpfile.js +++ b/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