update

_config.yml

@@ -1,11 +1,11 @@
 ############################### Basic Information ###############################
 info:
   name: Volantis
-  version: '2.3.1'
+  version: '2.3.2'
   docs: https://volantis.js.org/
   cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'.
-    css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.3.1.2/css/style.css
-    js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.3/js/app.js
+    # css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.3.1.2/css/style.css
+    # js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.3/js/app.js
 
 
 ############################### Style ###############################

scripts/tags/video.js

@@ -2,7 +2,22 @@
 
 function postVideo(args) {
   let src = args[0].trim()
-  return `<video controls preload width='100%' height='100%'><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video>`;
+  return `<video controls preload><source src='${src}' type='video/mp4'>Your browser does not support the video tag.</video>`;
+}
+
+function postVideos(args, content) {
+  args = args.join(' ').split(',')
+  var cls = args[0]
+  if (cls.length > 0) {
+    cls = ' ' + cls
+  }
+  var col = Number(args[1]) || 0;
+  if (col > 0) {
+    return `<div class="videos${cls}" col='${col}'>${content}</div>`
+  } else {
+    return `<div class="videos${cls}">${content}</div>`
+  }
 }
 
 hexo.extend.tag.register('video', postVideo);
+hexo.extend.tag.register('videos', postVideos, {ends: true});

source/css/_layout/article.styl

@@ -33,9 +33,6 @@
       display: inline
       margin: auto
 
-  video
-    border-radius: $border-codeblock
-
   h1,h2,h3,h4,h5,h6
     &:first-child
       margin-top: $gap-block

source/css/_tag-plugins/video.styl

@@ -0,0 +1,44 @@
+$sp = 4px
+
+video
+  border-radius: $border-codeblock
+  max-width: 100%
+
+div.videos
+  max-width: "calc(100% + 2 * %s)" % $sp
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-start
+  align-items: flex-end
+  margin: $gap-p 0 - $sp
+  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%
+    min-height: 300px
+  &.left
+    justify-content: flex-start
+  &.center
+    justify-content: center
+  &.right
+    justify-content: flex-end
+  &.stretch
+    align-items: stretch
+  &[col='1']
+    video,iframe
+      width: 100%
+  &[col='2']
+    video,iframe
+      width: "calc(50% - 2 * %s)" % $sp
+  &[col='3']
+    video,iframe
+      width: "calc(33.33% - 2 * %s)" % $sp
+  &[col='4']
+    video,iframe
+      width: "calc(25% - 2 * %s)" % $sp