video 居中

master
xaoxuu 4 years ago
parent e5d76ba99f
commit 56d3f299a4
  1. 2
      _config.yml
  2. 4
      scripts/tags/media.js
  3. 26
      source/css/_tag-plugins/media.styl

@ -586,5 +586,5 @@ info:
version: '2.6.5' # This is theme's version. version: '2.6.5' # This is theme's version.
docs: https://volantis.js.org/ # This is theme's URL. docs: https://volantis.js.org/ # This is theme's URL.
cdn: 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 js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.6.5/js/app.js

@ -2,12 +2,12 @@
function postAudio(args) { function postAudio(args) {
let src = args[0].trim() 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) { function postVideo(args) {
let src = args[0].trim() 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) { function postVideos(args, content) {

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

Loading…
Cancel
Save