summaryrefslogtreecommitdiff
path: root/_includes
diff options
context:
space:
mode:
Diffstat (limited to '_includes')
-rw-r--r--_includes/functions/get_banner.html24
-rw-r--r--_includes/views/banner.html43
-rw-r--r--_includes/views/header.html2
3 files changed, 65 insertions, 4 deletions
diff --git a/_includes/functions/get_banner.html b/_includes/functions/get_banner.html
index 6d07f10..502d7fc 100644
--- a/_includes/functions/get_banner.html
+++ b/_includes/functions/get_banner.html
@@ -42,3 +42,27 @@
{%- include functions.html func='get_value' -%}
{% assign banner_subheading_style = return %}
+{%- include functions.html func='log' level='debug' msg='Get banner_video value' -%}
+{% assign name = 'banner.video' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_video = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_loop value' -%}
+{% assign name = 'banner.loop' %}
+{%- include functions.html func='get_value' default=true -%}
+{% assign banner_loop = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_volume value' -%}
+{% assign name = 'banner.volume' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_volume = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_start_at value' -%}
+{% assign name = 'banner.start_at' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_start_at = return %}
+
+{% if banner_image or banner_video %}
+ {% assign has_banner = true %}
+{% endif %}
+
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index b852fb0..554a915 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -15,7 +15,7 @@
{%- include functions.html func='get_banner' -%}
-{%- if banner_image -%}
+{%- if has_banner -%}
{%- if banner_background -%}
<style>
html .page-banner {
@@ -65,8 +65,45 @@
{%- endif -%}
<section class="page-banner">
<div class="page-banner-img">
- <div style="background-image: url({{ banner_image }})"></div>
- <img class="img-placeholder" src="{{ banner_image }}"></div>
+ {%- if banner_video -%}
+ <video
+ autoplay=""
+ poster="{{ banner_image }}"
+ >
+ <source src="{{ banner_video }}">
+ </video>
+ <script>
+ (function() {
+ var video = document.querySelector('.page-banner .page-banner-img > video');
+ var videoPlay = function() {
+ try {
+ video.play();
+ } catch (e) {
+ console.error(e);
+ }
+ window.removeEventListener('focus', videoPlay);
+ }
+
+ window.addEventListener('focus', videoPlay);
+
+ video.onloadstart = function() {
+ video.volume = {{ banner_volume }};
+ video.currentTime = {{ banner_start_at }};
+ }
+
+ video.onended = function() {
+ video.currentTime = {{ banner_start_at }};
+ video.volume = 0;
+ {%- if banner_loop -%}
+ video.play();
+ {%- endif -%}
+ }
+ })();
+ </script>
+ {%- else -%}
+ <div style="background-image: url({{ banner_image }})"></div>
+ <img class="img-placeholder" src="{{ banner_image }}">
+ {%- endif -%}
</div>
<div class="wrapper">
<div class="page-banner-inner">
diff --git a/_includes/views/header.html b/_includes/views/header.html
index d8b43f4..169bf01 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -6,7 +6,7 @@
{%- include functions.html func='get_value' default=true -%}
{%- assign header_transparent = return -%}
-{%- if banner_image and header_transparent -%}
+{%- if has_banner and header_transparent -%}
{%- assign header_transparent_class = "site-header-transparent" -%}
{%- endif -%}