From ec6fbc876830319c1c1b65e4dd72a561bc080a64 Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Wed, 28 Feb 2024 00:51:33 +0400
Subject: [PATCH] feat: add support for embed video files (#1558)

---
 _includes/embed/bilibili.html         |  7 +++--
 _includes/embed/video.html            | 38 +++++++++++++++++++++++++++
 _includes/embed/youtube.html          |  2 +-
 _posts/2019-08-08-write-a-new-post.md | 27 +++++++++++++++++++
 _sass/addon/commons.scss              | 18 +++++++++----
 5 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 _includes/embed/video.html

diff --git a/_includes/embed/bilibili.html b/_includes/embed/bilibili.html
index eaa09d84..0aa5552d 100644
--- a/_includes/embed/bilibili.html
+++ b/_includes/embed/bilibili.html
@@ -1,10 +1,9 @@
 <iframe
-  class="embed-video bilibili"
+  class="embed-video"
   loading="lazy"
   src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
   scrolling="no"
-  border="0"
-  frameborder="no"
+  frameborder="0"
   framespacing="0"
   allowfullscreen="true"
-></iframe>
\ No newline at end of file
+></iframe>
diff --git a/_includes/embed/video.html b/_includes/embed/video.html
new file mode 100644
index 00000000..eb46c257
--- /dev/null
+++ b/_includes/embed/video.html
@@ -0,0 +1,38 @@
+{% assign video_url = include.src %}
+{% assign poster_url = include.poster %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include img-url.html src=video_url img_path=page.img_path %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include img-url.html src=poster_url img_path=page.img_path %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
+    Your browser doesn't support HTML video. Here is a <a href="{{ url }}">link to the video</a> instead.
+  </video>
+  <em>{{ include.title }}</em>
+</p>
diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html
index 640011f8..8f080021 100644
--- a/_includes/embed/youtube.html
+++ b/_includes/embed/youtube.html
@@ -1,5 +1,5 @@
 <iframe
-  class="embed-video youtube"
+  class="embed-video"
   loading="lazy"
   src="https://www.youtube.com/embed/{{ include.id }}"
   title="YouTube video player"
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 86194ed3..63a01163 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -427,6 +427,8 @@ Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the pos
 
 ## Videos
 
+### Video Sharing Platform
+
 You can embed a video with the following syntax:
 
 ```liquid
@@ -443,6 +445,31 @@ The following table shows how to get the two parameters we need in a given video
 | [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
 | [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
 
+### Video File
+
+If you want to embed a video file directly, use the following syntax:
+
+```liquid
+{% include embed/video.html src='{URL}' %}
+```
+
+Where `URL` is an URL to a video file e.g. `/assets/img/sample/video.mp4`.
+
+You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
+
+- `poster='/path/to/poster.png'` - poster image for a video that is shown while video is downloading
+- `title='Text'` - title for a video that appears below the video and looks same as for images
+- `autoplay=true` - video automatically begins to play back as soon as it can
+- `loop=true` - automatically seek back to the start upon reaching the end of the video
+- `muted=true` - audio will be initially silenced
+
+Consider an example utilizing all of the above:
+
+```liquid
+{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video'
+   autoplay=true loop=true muted=true %}
+```
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index d73a051b..8db34ae8 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -550,17 +550,25 @@ main {
   width: 100%;
   height: 100%;
   margin-bottom: 1rem;
+  aspect-ratio: 16 / 9;
 
   @extend %rounded;
 
-  &.youtube,
-  &.bilibili {
-    aspect-ratio: 16 / 9;
-  }
-
   &.twitch {
     aspect-ratio: 310 / 189;
   }
+
+  &.file {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    margin-bottom: 0;
+  }
+
+  @extend %img-caption;
 }
 
 /* --- buttons --- */