perf: optimize hero media using WebM/WebP and reduce asset size

[ShubhamOulkar]

Refactor hero background video logic to improve reliability, theme switching, and performance.

Changes

• Moved video visibility control from CSS to JS to avoid dual-video rendering issues
• Fixed poster flickering and incorrect poster persistence during theme changes
• Removed display: none usage for videos/posters and switched to opacity for smoother transitions and to prevent flicker
• Poster is now hidden only after video is ready using readyState (HAVE_FUTURE_DATA)
• Handled already-loaded videos to avoid missing canplay events on theme switch
• Simplified logic using getAssets() to remove duplication
• Removed video.src checks (unreliable) in favor of readyState
• Removed mobile blocking logic (getComputedStyle hack) 🚀🚀🚀
• Enabled background video animation on mobile 🥳🥳🥳
• Maintains accessibility by respecting prefers-reduced-motion

Result

• Correct poster/video sync across theme changes
• Smooth poster to video transition using opacity
• Stable playback even after multiple theme toggles
• Improved mobile support and cleaner logic 💥

Asset	Before	After	Reduction
Video (MP4 → WebM)	651 KB	224 KB	~65%
Image (JPG → WebP)	93 KB	57 KB	~40%

[netlify]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	72a7a81
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/69cc8d04f6e3900008efed42
😎 Deploy Preview	https://deploy-preview-2221--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[bjohansebas]

Does anyone have the Safari browser so they can test this for me? It seems to be the only browser that doesn’t fully support the WebM format.

[ShubhamOulkar]

Does anyone have the Safari browser so they can test this for me? It seems to be the only browser that doesn’t fully support the WebM format.

macOS 11.3+ and iOS/iPadOS 14.1+ or newer supports the WebM container format for VP8/VP9 video codecs. Current video are vp9.

can you enable preview url so that we can test?

[krzysdz]

Does anyone have the Safari browser so they can test this for me? It seems to be the only browser that doesn’t fully support the WebM format.

I have old macOS installed (today I booted it for the first time in 3 years) - Ventura 13.4.1 with Safari 16.5.1 and the videos work.

VID_20260328_213435-muted.mp4

[ShubhamOulkar]

I have old macOS installed (today I booted it for the first time in 3 years) - Ventura 13.4.1 with Safari 16.5.1 and the videos work.

Thank you @krzysdz 🤗 for manual tests

[bjohansebas]

@ShubhamOulkar rebase please

[bjohansebas]

@ShubhamOulkar keep this PR simple, it distracts from the objective of this and makes it harder for me to review

[ShubhamOulkar]

it distracts from the objective of this and makes it harder for me to review

I am just lazy to open PR for these were minimal changes logically independent of hero. OK I will not add more commits.🤗

[ShubhamOulkar]

@bjohansebas should I merge this? I need some of the changes from here.