bep40 commited on
Commit
63fecd9
·
verified ·
1 Parent(s): 0ddc0a0

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
Files changed (1) hide show
  1. 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
+ }