feat: support video banner

raulfercobo · Jun 26, 2021 · 11edca1 · 11edca1
1 parent 29f69dc
commit 11edca1
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 -%}
 

diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
@@ -575,6 +575,11 @@ html {
       transition: 0.1s all ease-in-out;
     }
 
+    & > video {
+      width: 100vw;
+      object-fit: cover;
+    }
+
     & > img.img-placeholder {
       display: none;
     }