Skip to content

FIX: Show a poster for Mux videos and play them inline on mobile - #103

Merged
ZogStriP merged 1 commit into
mainfrom
fix-mobile-video-poster
Oct 23, 2026
Merged

ZogStriP merged 1 commit into
mainfrom
fix-mobile-video-poster

Conversation

@ZogStriP

@ZogStriP ZogStriP commented Oct 22, 2026 •

Copy link
Copy Markdown
Member

Previously, the <video> rendered for a ready Mux video had no poster, so on mobile the player could show no preview until playback started, and without playsinline Safari on iPhone played it fullscreen instead of inside the post.

This change uses the Mux thumbnail at the one second mark as the poster and sets playsinline. Without a size, Mux serves that thumbnail at the source video's resolution, larger than the player needs. Mux scales it to fit the requested box, upscaling if needed, so capping only the width would enlarge 1080p portrait videos. Bounding both sides to 1280x1920 gives a 1080p landscape video a 1280x720 poster and keeps a portrait one at its 1080x1920 size.

It also adds an acceptance test for rendering a ready video in a post, which nothing covered.

Includes the fix from #102 by @schiller, with the poster thumbnail size capped and an acceptance test.

Part of a stack of PRs, to be merged in order:

  1. FIX: Show a poster for Mux videos and play them inline on mobile #103 👈 this PR
  2. FIX: Update the right posts when a Mux video becomes ready #104
  3. DEV: Simplify the webhook, playback lookup and their specs #105
  4. PERF: Cut per-post queries and table scans for post videos #106
  5. FIX: Render each video in a post with its own status #107
  6. DEV: Simplify video rendering and consolidate its tests #108
  7. UX: Use sentence case for video strings and fix the preview placeholder #109
  8. FIX: Show video changes in posts without reloading the topic #110
  9. PERF: Load video streams only once playback starts #111
  10. DEV: Move video rendering into a module #112
  11. FIX: Restore video embeds in chat messages #113

Co-authored-by: Luiz Gustavo Schiller schillerbr@gmail.com

Previously, the `<video>` rendered for a ready Mux video had no
`poster`, so on mobile the player could show no preview until playback
started, and without `playsinline` Safari on iPhone played it
fullscreen instead of inside the post.

This change uses the Mux thumbnail at the one second mark as the poster
and sets `playsinline`. Without a size, Mux serves that thumbnail at the
source video's resolution, larger than the player needs. Mux scales it
to fit the requested box, upscaling if needed, so capping only the width
would enlarge 1080p portrait videos. Bounding both sides to 1280x1920
gives a 1080p landscape video a 1280x720 poster and keeps a portrait
one at its 1080x1920 size.

It also adds an acceptance test for rendering a ready video in a post,
which nothing covered.

Co-authored-by: Luiz Gustavo Schiller <schillerbr@gmail.com>
@ZogStriP
ZogStriP merged commit 85e8e5d into main Oct 23, 2026
7 checks passed
@ZogStriP
ZogStriP deleted the fix-mobile-video-poster branch October 23, 2026 08:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants