Video-led LandingHero: no poster/preload/error handling, and getVideoFrameUrl allowlist is stale

[mobeenabdullah]

Follow-up from review on #1057.

On video-led landing pages the hero <video> (LandingHero.astro) has no poster, no preload, and no error handling, replacing an <img> that had loading="eager" + fetchpriority="high". <video> is not LCP-priority-eligible, so the hero regresses on every video-led page.

Root issue for the poster fallback: video-thumbnail.ts only allowlists engcomfy.com, but live hub thumbnails are served from comfy-hub-assets.comfy.org (verified: the image-to-3d hero video is https://comfy-hub-assets.comfy.org/uploads/...mp4), so getVideoFrameUrl returns null for all of them and the fallback is dead in production.

Proposed fix (needs care, so tracked separately):

1. Confirm comfy-hub-assets.comfy.org supports Cloudflare cdn-cgi/media/mode=frame, then widen CLOUDFLARE_CDN_DOMAIN (shared util, site-wide blast radius).
2. Add poster (from getVideoFrameUrl) + preload + the ThumbnailDisplay.astro 3s paused && readyState < 3 fallback to the hero video.
3. Re-check LCP with Lighthouse.

Reported by @MaanilVerma.

[coderabbitai]

🔗 Related PRs

#1057 - fix(site): link restore-old-photos to its workflow and keep use-case pins on top [open]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[deepme987]

Mostly resolved by #1216 (merged, live). Recording what is done and what is not, so this can be closed or narrowed rather than re-derived.

1. getVideoFrameUrl allowlist — done. site/src/lib/video-thumbnail.ts:20 is now ['engcomfy.com', 'comfy-hub-assets.comfy.org'], suffix-matched. The poster fallback is alive in production.

2. poster + preload + error handling — two of three.

• poster — done. LandingHero.astro passes heroVideoPoster, resolved through landingHeroPreload(), which prefers the generated poster and falls back to the cdn-cgi/media/mode=frame transform that item 1 unblocked.
• The LCP-priority regression this issue is really about — done, though not via a preload attribute. <video> still is not LCP-priority-eligible, so the page now emits <link rel="preload" as="image" fetchpriority="high"> for the poster, resolved through the same helper the element reads so the two cannot become separate requests. That gives the hero its priority back. The video keeps autoplay and no preload attribute, which is fine above the fold — and autoplay overrides preload anyway.
• Error handling — not done. ThumbnailDisplay.astro has the error/stalled listeners and the 3 s paused && readyState < 3 autoplay-suppression fallback. LandingHero's video has none of it. On a video-led landing hero that fails or is suppressed, the reader is left on the poster with no recovery, or on an empty frame if the poster also failed.

3. Re-check LCP with Lighthouse — done. #1216 re-enabled Lighthouse CI with error-level total-byte-weight / CLS / TBT budgets across four page types, so this is now measured per PR rather than by hand.

Remaining scope: item 2's third bullet only — port the data-video-fallback treatment from ThumbnailDisplay.astro to the LandingHero video. Small and self-contained.

Related, on the still branch of the same component: #1231 covers animated-WebP heroes now rendering frozen, which is a different code path (landingHeroImage, not the video branch) but the same file, so the two are worth doing together if anyone picks this up.