summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorjeffreytse <jeffreytse.mail@gmail.com>2021-06-26 12:05:19 +0800
committerjeffreytse <jeffreytse.mail@gmail.com>2021-06-26 12:05:19 +0800
commit11edca189059cf5bbe78443afbb191e740c6fa60 (patch)
tree680e04a27e0905f05ef1bb48a477d590c0c58672
parent29f69dcc2aacc5a100e5d15d1decf0a8d1f15cac (diff)
feat: support video banner
-rw-r--r--_includes/functions/get_banner.html24
-rw-r--r--_includes/views/banner.html43
-rw-r--r--_includes/views/header.html2
-rw-r--r--_sass/yat/_layout.scss5
4 files changed, 70 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 -%}
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 2acf1f1..8bc0814 100644
--- 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;
}