fix: load videos in Media Gen preview on mobile (muted autoplay + poster)

[atomantic]

Problem

Videos from the Media Gen pages didn't load in the preview modal on mobile — the area showed only a black box.

Root cause

The lightbox <video> (and the Video Gen page's inline result preview) used autoPlay without muted and without a poster. Mobile browsers (iOS Safari especially, also Chrome Android) block unmuted autoplay that isn't triggered inside a direct user gesture. Opening the modal is a tap, but play() happens during render — so the clip never starts, and with no poster the element paints nothing until playback begins. The result reads as "not loading."

Images were unaffected because they render a small always-visible <img> thumbnail. Server-side express.static already sets acceptRanges: true, so this was never a Range/serving problem — it's purely the video element's mobile autoplay/poster behavior.

Fix

For both video surfaces on the Media Gen pages:

• muted — makes autoplay eligible under the mobile media-engagement policy (iOS/Android). controls stays so the user can unmute.
• poster — paints the thumbnail immediately, so there's a visible frame even while the clip buffers (and as a fallback if playback is deferred). The lightbox uses item.previewUrl; the Video Gen inline preview uses result.thumbnail.
• preload="metadata" — ensures the first frame/metadata loads (also already present on the inline preview).

This is the conventional muted-autoplay preview pattern. The one behavior change on desktop is that the clip now autoplays muted instead of with sound — intentional and gentler; controls allow unmuting.

Files

• client/src/components/media/MediaLightbox.jsx — preview-modal <video> gets muted + poster.
• client/src/pages/VideoGen.jsx — inline result preview gets the same fix.
• client/src/components/media/MediaLightbox.test.jsx — new regression test pinning the <video> contract (poster, muted, playsInline, loop, controls, src), plus poster-omitted-when-no-thumbnail.

Testing

• New test green; full media-area suite 43/43 pass (lightbox, collections, normalize, variants, MediaImage).
• ESLint clean on changed files.

[Copilot]

Pull request overview

Fixes mobile “black box” video previews in Media Gen by updating <video> elements to use the standard muted-autoplay + poster pattern so iOS/Android will actually start playback (or at least render a visible thumbnail immediately).

Changes:

• Add muted, poster, and preload="metadata" to the MediaLightbox video element.
• Apply the same muted + poster behavior to the Video Gen inline result preview.
• Add a new regression test to pin the MediaLightbox <video> markup contract (including omitting poster when no thumbnail exists).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
client/src/components/media/MediaLightbox.jsx	Updates the lightbox <video> to be mobile-autoplay compatible and to render a thumbnail immediately via poster.
client/src/pages/VideoGen.jsx	Updates the inline preview <video> to autoplay muted on mobile and show a thumbnail via poster.
client/src/components/media/MediaLightbox.test.jsx	Adds regression coverage ensuring the lightbox <video> includes the required attributes and omits poster when absent.
.changelog/NEXT.md	Documents the mobile preview fix in the vNEXT changelog.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.