fpv video page: thumbnail poster + play overlay instead of black screen#82
Merged
itamarwe merged 1 commit intoJul 5, 2026
Conversation
…k screen The <video> element had no poster attribute, so before metadata loaded (or if playback never started) the player was just a black box. Wraps the video in a .video-stage container, sets poster=thumbnailUrl (same field the gallery cards already use), and adds a centered play-button overlay (reusing the existing play/pause handler) that's shown only while paused and disappears once playback starts. Verified headlessly: rendered DOM shows the poster attribute pointing at the real CDN thumbnail and the overlay button positioned over the video; JS passes node --check. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YVLz2Gms21jzv8S6NE1XaT
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
itamarwe
merged commit e9cb4c9
into
claude/blog-post-clarifications-yvwp30
3 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the video-view page opening to a black rectangle instead of the clip's thumbnail with a play affordance.
Root cause: the
<video>element had noposterattribute, so before its metadata loaded (preload="metadata") — or if the visitor never presses play — the browser just renders a black box. The only way to start playback was a small play/pause button in the transport bar below the video, with no visual cue on the video area itself.Fix:
<video>in a.video-stagecontainer and setposter={thumbnailUrl}— the same field the gallery cards already use for their thumbnails, so it's guaranteed present for every video..video-play-overlayplay button (▶) on top of the poster, reusing the existing play/pause click handler. It's only rendered while paused and disappears once playback starts, so it never blocks interaction with a playing video.Same pattern as the earlier viewer patches: this edits the built bundle (
index-ObpdO5MX.js+ its CSS) directly, since the source lives infpv-drone-strikes-lebanon-dataset— the durable fix belongs there on the next rebuild.Verified headlessly:
node --checkpasses; the rendered DOM shows(The video area itself still renders black in the sandbox screenshot only because this environment can't reach the CDN to fetch the actual thumbnail — same known limitation as the earlier scene-viewer checks.)
🤖 Generated with Claude Code
https://claude.ai/code/session_01YVLz2Gms21jzv8S6NE1XaT
Generated by Claude Code