From ed6dc539eff7003a3765bcd8c31ae5e91a863d65 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 17 Dec 2022 03:56:19 +0800
Subject: [PATCH] feat: add embed video support

---
 _includes/embed/twitch.html  |  4 ++++
 _includes/embed/youtube.html |  6 ++++++
 _sass/addon/commons.scss     | 15 +++++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 _includes/embed/twitch.html
 create mode 100644 _includes/embed/youtube.html

diff --git a/_includes/embed/twitch.html b/_includes/embed/twitch.html
new file mode 100644
index 0000000..ab0419a
--- /dev/null
+++ b/_includes/embed/twitch.html
@@ -0,0 +1,4 @@
+<iframe class="embed-video twitch lazyload"
+  src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
+  frameborder="0" allowfullscreen="true"
+  scrolling="no"></iframe>
diff --git a/_includes/embed/youtube.html b/_includes/embed/youtube.html
new file mode 100644
index 0000000..715063c
--- /dev/null
+++ b/_includes/embed/youtube.html
@@ -0,0 +1,6 @@
+<iframe class="embed-video youtube lazyload"
+  src="https://www.youtube.com/embed/{{ include.id }}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen></iframe>
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 6ea733d..e4e3850 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -576,6 +576,21 @@ i { /* fontawesome icons */
   }
 }
 
+.embed-video {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+
+  &.youtube {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
+  }
+}
+
 /* --- buttons --- */
 .btn-lang {
   border: 1px solid !important;