calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9uv0f8oll: Fit mobile videos to the screen without cropping

Browse Source
This commit is contained in:
calcazar
2026-10-20 09:59:38 -06:00
parent c4434198ad
commit d653e8e75d
7 changed files with 114 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/mobile.css
+16
View File
@@ -52,6 +52,22 @@
.slide-video .slide-art video,
.slide-video .slide-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide-video .slide-art > div { height: 100%; }
.slide-video .slide-art video { background: transparent; }
/* Wider than 4:5: show the whole video, centered, over a blurred, darkened, enlarged copy of its own thumbnail. */
.slide-backdrop { display: none; }
.slide-video[data-fit="contain"] .slide-backdrop {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.25);
filter: blur(28px) brightness(0.5);
pointer-events: none;
}
.slide-video[data-fit="contain"] .slide-art video,
.slide-video[data-fit="contain"] .slide-art img { object-fit: contain; }
.slide-pending { display: grid; place-items: center; color: var(--ink-2); font-size: 14px; }
.slide-play { z-index: 4; }
.slide-dur { top: 128px; right: 16px; z-index: 4; }