From 56d3f299a40837a4cce0e48151ceb09cd6b94dee Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Wed, 6 May 2020 22:17:20 +0800
Subject: [PATCH] =?UTF-8?q?video=20=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                        |  2 +-
 scripts/tags/media.js              |  4 ++--
 source/css/_tag-plugins/media.styl | 26 ++++++++++++++++----------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/_config.yml b/_config.yml
index def469e..b85e648 100755
--- a/_config.yml
+++ b/_config.yml
@@ -586,5 +586,5 @@ info:
   version: '2.6.5' # This is theme's version.
   docs: https://volantis.js.org/ # This is theme's URL.
   cdn:
-    css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/css/style.css
+    # css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/css/style.css
     js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/js/app.js
diff --git a/scripts/tags/media.js b/scripts/tags/media.js
index e829ee4..784b3ba 100644
--- a/scripts/tags/media.js
+++ b/scripts/tags/media.js
@@ -2,12 +2,12 @@
 
 function postAudio(args) {
   let src = args[0].trim()
-  return `<audio controls preload><source src='${src}' type='audio/mp3'>Your browser does not support the audio tag.</audio>`;
+  return `<div class="audio"><audio controls preload><source src='${src}' type='audio/mp3'>Your browser does not support the audio tag.</audio></div>`;
 }
 
 function postVideo(args) {
   let src = args[0].trim()
-  return `<video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video>`;
+  return `<div class="video"><video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video></div>`;
 }
 
 function postVideos(args, content) {
diff --git a/source/css/_tag-plugins/media.styl b/source/css/_tag-plugins/media.styl
index cebd532..bb6777b 100644
--- a/source/css/_tag-plugins/media.styl
+++ b/source/css/_tag-plugins/media.styl
@@ -3,21 +3,27 @@ $sp = 4px
 audio,video
   border-radius: $border-codeblock
   max-width: 100%
+video
+  z-index: 1
+  trans()
+  &:hover
+    box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
+
+div.video
+  line-height: 0
+  text-align: center
 
 div.videos
   max-width: "calc(100% + 2 * %s)" % $sp
   display: flex
   flex-wrap: wrap
-  justify-content: space-start
+  justify-content: flex-start
   align-items: flex-end
   margin: $gap-row 0 - $sp
-  video,iframe
+  .video,iframe
     width: 100%
     margin: $sp
-  video
-    trans()
-    &:hover
-      box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.24), 0 8px 16px 0px rgba(0, 0, 0, 0.24)
+
   iframe
     border-radius: $border-codeblock
     width: 100%
@@ -31,14 +37,14 @@ div.videos
   &.stretch
     align-items: stretch
   &[col='1']
-    video,iframe
+    .video,iframe
       width: 100%
   &[col='2']
-    video,iframe
+    .video,iframe
       width: "calc(50% - 2 * %s)" % $sp
   &[col='3']
-    video,iframe
+    .video,iframe
       width: "calc(33.33% - 2 * %s)" % $sp
   &[col='4']
-    video,iframe
+    .video,iframe
       width: "calc(25% - 2 * %s)" % $sp