Give a video its shape before it has any data

A Reddit video sat in the wrong box until you pressed play, for two reasons
that looked like one.

The renderer put only `aspect-ratio` on the `<video>`. A video with no data
has a natural size of 300x150, and WebKit sizes a replaced element from that
rather than from the ratio, so a portrait video got a squat landscape box and
kept it until playback supplied real dimensions. Chromium stretch-fits
instead and gets it right, which is why this only showed on Safari. A
video's size before its data arrives is its poster's, so one with no poster
of its own now gets an empty SVG of the right shape as a stand-in: a data
URI, so it costs no request. Measured in both engines across portrait,
landscape, square and small.

And Reddit's videos with sound had no poster to be sized by, because
`fromRedditVideo` attached the still from `preview.images` to the MP4 branch
alone. The still belongs to the video, not to the format it is served in, so
every post with sound showed an empty box where a silent one showed a frame.
It now goes on both.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01PLkmgp1fWbA4XbarxKdRKt

src/platforms/reddit.ts

@@ -104,6 +104,10 @@ function fromRedditVideo(video: RedditVideo, poster: string | undefined): Media[
   const common = {
     ...sized(video.width, video.height),
     ...(video.duration ? { durationSec: video.duration } : {}),
+    // The still belongs to the video and not to the format it is served in.
+    // The HLS branch used to drop it, which is why a post with sound showed
+    // an empty box where every silent one showed a frame.
+    ...(poster ? { poster: { url: poster } } : {}),
   };
 
   if (video.has_audio !== false && video.hls_url) {
@@ -114,12 +118,7 @@ function fromRedditVideo(video: RedditVideo, poster: string | undefined): Media[
   if (url === video.hls_url) {
     return [{ kind: 'video', url, hls: true, direct: true, ...common }];
   }
-  return [{
-    kind: 'video',
-    url,
-    ...(poster ? { poster: { url: poster } } : {}),
-    ...common,
-  }];
+  return [{ kind: 'video', url, ...common }];
 }
 
 /** One entry of a gallery post. Reddit keeps the pictures somewhere other