video 居中

_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

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) {

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