Spaces:
Running
Running
Fix 1:1 (ratio-square) view for Dan tri/SKDS videos: fill full height + crop width. YouTube iframe ignores object-fit, so size iframe 16:9 around 100% height, center it, slide overflow:hidden crops the sides.
Browse files- static/fm_fix.css +24 -0
static/fm_fix.css
CHANGED
|
@@ -63,3 +63,27 @@
|
|
| 63 |
/* article-view top spacing so badge+title not clipped */
|
| 64 |
.article-view .badge{margin-bottom:6px!important}
|
| 65 |
.article-view .tts-selector{width:auto!important;display:block!important}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
/* article-view top spacing so badge+title not clipped */
|
| 64 |
.article-view .badge{margin-bottom:6px!important}
|
| 65 |
.article-view .tts-selector{width:auto!important;display:block!important}
|
| 66 |
+
|
| 67 |
+
/* ============================================================
|
| 68 |
+
1:1 ("ratio-square") view for normal horizontal Dan tri / SKDS videos.
|
| 69 |
+
Spec: fill 100% of the slide HEIGHT, crop the excess WIDTH (cut left/right).
|
| 70 |
+
A YouTube <iframe> ignores object-fit, so instead of letterboxing we size the
|
| 71 |
+
iframe to FULL slide height and 16:9 width (177.78vh -> wider than a phone),
|
| 72 |
+
center it, and let the slide's overflow:hidden clip the sides.
|
| 73 |
+
These rules load after app_v2.js's injected <style> and use !important,
|
| 74 |
+
so they override the old (broken) object-fit:contain square version.
|
| 75 |
+
============================================================ */
|
| 76 |
+
.tiktok-slide.ratio-square{position:relative!important;overflow:hidden!important;display:block!important;background:#000!important}
|
| 77 |
+
.tiktok-slide.ratio-square>iframe,
|
| 78 |
+
.tiktok-slide.ratio-square>video{
|
| 79 |
+
position:absolute!important;
|
| 80 |
+
top:50%!important;
|
| 81 |
+
left:50%!important;
|
| 82 |
+
transform:translate(-50%,-50%)!important;
|
| 83 |
+
height:100%!important; /* 100% full height */
|
| 84 |
+
width:177.78vh!important; /* 16/9 of the height -> overflow on the sides */
|
| 85 |
+
min-width:100%!important; /* never narrower than the screen */
|
| 86 |
+
max-width:none!important;
|
| 87 |
+
max-height:none!important;
|
| 88 |
+
object-fit:cover!important; /* affects <video>; harmless for <iframe> */
|
| 89 |
+
}
|