[Bug]: Persistent mini-player shows massive empty black box for vertical (9:16) videos on mobile

What happened?

When watching vertical/portrait videos (e.g. Bilibili 1080×1920 videos) on mobile, scrolling down past the video viewport into comments or secondary content triggers the persistent mini-player (typetype-persistent-player-frame[data-floating]).

Instead of displaying as a compact 16:9 card, the floating window container is stretched vertically into an elongated near-square shape. The top half renders the video and controls at 16:9, while the bottom half displays a massive empty solid black box.

Steps to reproduce

Open TypeType on a mobile browser or PWA (e.g. iOS Safari / WebApp).
Play a vertical/portrait video on the watch page (e.g. Bilibili BV1pJAMzpE6K).
Scroll down below the video stage into the comments section.
Observe the appearance of the floating mini-player: a large black rectangle extends below the video playback controls.

Area

Frontend (web app)

Channel

main (stable)

Anything else?

Sample Video

Bilibili: BV1pJAMzpE6K
Video Dimension: 1080 × 1920 (9:16 vertical stream)

Analysis / Potential Cause

In watch-mobile-landscape.css, .typetype-persistent-player-frame[data-floating] declares:
```
width: min(22rem, calc(100vw - 1rem));
aspect-ratio: 16 / 9;
```
However, Vidstack's inner <media-player> detects intrinsic video dimensions from metadata (videoWidth: 1080, videoHeight: 1920) and computes a 9:16 aspect ratio.
Because the outer container does not strictly constrain child height (min-height defaults to auto), the inner player stretches the container height vertically, exposing the player frame's bg-black beneath the .typetype-compact-controls bar.

Done in 1.11.0. Full release note here.

Thanks for the fix, the previous issue where an empty black box blocked the screen is fixed now, but there's still an issue with vertical videos on iOS Safari and WebApp. When playing in the floating mini-player, the video content gets cropped on the top and bottom rather than maintaining its full aspect ratio or fitting inside the player, this problem does not occur on desktop.

Thanks for the iOS screenshots! In 1.12.0 the floating player fits vertical videos inside it instead of cropping the top and bottom. I couldn't test it on iOS Safari myself, so if it's still cropped there, please reopen and I'll dig into it. ＼(^o^)／ Release note

I don't have permission to reopen this issue, could you reopen it when you get a chance? Just checked on 1.12.0 on iOS Safari, and vertical videos are unfortunately still cropped on the top and bottom.

Looking at the styles, my theory is that object-fit: contain alone might not be enough on WebKit: Vidstack sets height: auto on <video> by default, which might cause iOS Safari to calculate the video element's height based on its intrinsic 9:16 aspect ratio (~600px tall), and then it gets clipped by the 16:9 container's overflow: hidden.

Maybe adding an explicit height: 100% could fix it by forcing WebKit to stay within the 16:9 bounds? Something like:

.typetype-persistent-player-frame[data-floating] video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Thanks for checking! 1.13.0 adds the height: 100% you suggested to the floating player. I couldn't reproduce the crop in iOS Safari, even on 1.12.0, so could you check on 1.13.0 and tell me your iOS version, and whether you use Safari or the Home Screen web app? Release note

Thanks for the quick fix in 1.13.0, The floating mini-player works great now — vertical videos stay fully contained with pillarboxes when scrolling down :D

However, I noticed that the main player at the top still experiences the same vertical cropping on iOS (Safari / WebKit):

When the page first loads, the poster image flashes properly for about a second (contained with black bars on both sides).
As soon as video playback starts / metadata loads, the video suddenly zooms in and crops off the top and bottom (head and lower body cut off).

Root Cause

In apps/web/src/styles/watch-mobile-landscape.css, the new CSS rules are scoped strictly to [data-floating]:

.typetype-persistent-player-frame[data-floating] [data-media-player],
.typetype-persistent-player-frame[data-floating] [data-media-provider] {
  height: 100%;
  aspect-ratio: auto;
}

.typetype-persistent-player-frame[data-floating] video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

When the player is in the default top position on the watch page, floating is false, so data-floating is not present on .typetype-persistent-player-frame.

Without these rules, the <video> element falls back to height: auto. iOS WebKit calculates the intrinsic DOM height based on the 9:16 ratio (~690px), which gets clipped by the 16:9 (overflow: hidden) frame.

Suggested Fix

Removing the [data-floating] restriction so it applies to .typetype-persistent-player-frame in both normal and floating states fixes the top player as well:

.typetype-persistent-player-frame [data-media-player],
.typetype-persistent-player-frame [data-media-provider] {
  height: 100%;
  aspect-ratio: auto;
}

.typetype-persistent-player-frame video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

The main player now gets the same rules as the floating one. Could you check on iOS Safari? https://experiment.typetype.video/watch?v=vMGuObY8_sw

It’s OK now, thx for the fix :)

Navigation Menu

Repository navigation

[Bug]: Persistent mini-player shows massive empty black box for vertical (9:16) videos on mobile #334

What happened?

Steps to reproduce

Area

Channel

Anything else?

Sample Video

Analysis / Potential Cause

Root Cause

Suggested Fix

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Bug]: Persistent mini-player shows massive empty black box for vertical (9:16) videos on mobile #334

Description

What happened?

Steps to reproduce

Area

Channel

Anything else?

Sample Video

Analysis / Potential Cause

Activity

Priveetee commented on Oct 24, 2026

Aquarius-Situla commented on Oct 26, 2026

Priveetee commented on Oct 29, 2026

Aquarius-Situla commented on Oct 29, 2026

Priveetee commented on Oct 30, 2026

Aquarius-Situla commented on Oct 31, 2026

Root Cause

Suggested Fix

Priveetee commented on Oct 31, 2026

Aquarius-Situla commented on Oct 31, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions