fix(docs): show a poster frame for the quickstart video - #585
Open
AlexBodner wants to merge 1 commit into
Open
Conversation
The homepage video rendered as an empty box until the visitor pressed play. It is the only video in the docs with preload="none" and no poster, so the browser fetched nothing at all, including the first frame. Every other video either autoplays or leaves preload at the browser default. Add a poster frame (34 KB WebP, extracted at t=2.5s where six riders are tracked with IDs, masks, and motion trails) so the element shows the demo immediately. Keep preload="none": the poster renders with zero video bytes fetched, where preload="metadata" made Chrome pull ~3.3 MB of the 13 MB file on every page load. Also pin aspect-ratio: 16/9, matching the tracker pages, so the element reserves its final height before the poster loads instead of shifting layout. Verified in a browser against a local build: poster paints from a single 34 KB request, 0 bytes of video transferred until play, playback then starts normally, English captions track intact, box height stable across load. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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.
The video at the top of the quickstart page renders as an empty box until you press play.
Cause
It is the only
<video>in the docs withpreload="none"and noposter, so the browser fetches nothing at all, including the first frame. Every other video indocs/either hasautoplay(which forces loading) or leavespreloadat the browser default.Why not just change preload
preload="metadata"does fix the blank box, but measured in Chrome against a local build it pulled ~3.3 MB of the 13.1 MB file on page load, buffering 2.6s of video before any interaction. That is a poor trade on the page we most want to be fast.A poster gets the same visual result for 34 KB and keeps
preload="none", so no video bytes move until the visitor actually plays it.The poster
Frame extracted at t=2.5s, where six riders are tracked with visible IDs, segmentation masks, and motion trails, so the still communicates multi-object tracking. The t=0 frame shows only two objects, one half off-screen. Encoded as WebP at 1280x720, matching the existing
.webpassets underdocs/assets/mcbyte/.Also
Pinned
aspect-ratio: 16/9to matchdocs/trackers/*.md. Without it the element has no intrinsic size until the poster decodes, so it shifts layout on load.Verification
In a browser against a local build:
aspect-ratio: 16 / 9🤖 Generated with Claude Code