From 99c4c89f0afcb22b62523e6c18d317d695aabde0 Mon Sep 17 00:00:00 2001
From: zhixuan <59254886+zhixuan666@users.noreply.github.com>
Date: Tue, 27 Jul 2021 17:42:06 +0900
Subject: [PATCH] feat(article): add video shortcode (#280)

---
 assets/scss/partials/layout/article.scss |  2 +-
 layouts/shortcodes/video.html            | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/video.html

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 5331a61..4309039 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -385,7 +385,7 @@
         padding-bottom: 56.25%;
         overflow: hidden;
 
-        & > iframe {
+        & > iframe, & > video {
             position: absolute;
             width: 100%;
             height: 100%;
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
new file mode 100644
index 0000000..733761a
--- /dev/null
+++ b/layouts/shortcodes/video.html
@@ -0,0 +1,13 @@
+<div class="video-wrapper">
+    <video
+    controls
+    {{ with .Get "poster" }}poster="{{- . -}}"{{ end }}
+    {{ with .Get "src" }}src="{{- . -}}"{{ end }}
+    {{ with .Get "autoplay" }}autoplay{{ end }}
+    >
+        <p>
+            Your browser doesn't support HTML5 video. Here is a
+            <a href="{{ with .Get "src" }}{{- . -}}{{ end }}">link to the video</a> instead.
+        </p>
+    </video>
+</div>