Embed: center video in container (only relevant when fillSpace is used)

This commit is contained in:
Cat 2020-07-21 11:36:53 +02:00 committed by Thulinma
parent 20bf01d911
commit e0e272b2e9
3 changed files with 7 additions and 0 deletions

View file

@ -64,6 +64,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
.vjs-text-track-display{pointer-events:none} .vjs-text-track-display{pointer-events:none}
.mistvideo{line-height:1.2;font-size:14.5px} .mistvideo{line-height:1.2;font-size:14.5px}
.mistvideo svg{margin:2.5px} .mistvideo svg{margin:2.5px}
.mistvideo-video{display:flex;align-items:center;justify-content:center}
.mistvideo-background{background-color:$background} .mistvideo-background{background-color:$background}
.mistvideo-totalTime:before{content:'/';margin:.2em} .mistvideo-totalTime:before{content:'/';margin:.2em}
.mistvideo-progress{padding:10px 0;margin:-10px 0;z-index:2} .mistvideo-progress{padding:10px 0;margin:-10px 0;z-index:2}

View file

@ -64,6 +64,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
.vjs-text-track-display{pointer-events:none} .vjs-text-track-display{pointer-events:none}
.mistvideo{line-height:1.2;font-size:14.5px} .mistvideo{line-height:1.2;font-size:14.5px}
.mistvideo svg{margin:2.5px} .mistvideo svg{margin:2.5px}
.mistvideo-video{display:flex;align-items:center;justify-content:center}
.mistvideo-background{background-color:$background} .mistvideo-background{background-color:$background}
.mistvideo-totalTime:before{content:'/';margin:.2em} .mistvideo-totalTime:before{content:'/';margin:.2em}
.mistvideo-progress{padding:10px 0;margin:-10px 0;z-index:2} .mistvideo-progress{padding:10px 0;margin:-10px 0;z-index:2}

View file

@ -5,6 +5,11 @@
.mistvideo svg { .mistvideo svg {
margin: 2.5px; margin: 2.5px;
} }
.mistvideo-video { /* keep video centered if container is larger (when fillSpace:true) */
display: flex;
align-items: center;
justify-content: center;
}
.mistvideo-background { background-color: $background; } .mistvideo-background { background-color: $background; }
.mistvideo-totalTime:before { .mistvideo-totalTime:before {
content: '/'; content: '/';