Hero: variant-driven video backdrop with poster for LCP#11
Merged
Conversation
The `video` variant now uses the authored image as the LCP poster and layers an authored .mp4/.webm URL on top as a muted, looping, autoplay backdrop. The poster is loaded eagerly at high priority; the video is attached only after the page load event to protect LCP, and is skipped entirely under prefers-reduced-motion or when autoplay is blocked (poster remains). Video is now gated on the .video variant instead of URL-guessing heuristics; the YouTube/Vimeo embed paths were removed in favor of direct video files. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
A full-bleed autoplay video overtakes the poster as the LCP element on slow connections (PSI mobile LCP ~9.6s). Limit the video to >=900px viewports on capable, non-data-saver connections; mobile and constrained clients keep the eager poster image, which stays the LCP element (~fast). Desktop is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Empty commit to re-trigger the aem-psi-check after a transient desktop Lighthouse timeout on the previous run. Co-Authored-By: Claude Opus 4.8 <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.
What
Refactors the hero block so the
hero (video)variant plays a video backdrop while keeping the authored image as the LCP poster.Test URLs
Compare the hero at the top of
/en/us:Changes
blocks/hero/hero.js— variant-driven: in thevideovariant, the first authored image becomes the poster and the first.mp4/.webmURL (link or plain text) becomes the backdrop source. Plain hero stays image-only. Removed the old URL-guessing heuristics and the YouTube/Vimeo embed paths (direct video files only).blocks/hero/hero.css— the video layers over the poster and fades in (is-playing) once it actually plays; dropped the unused iframe-embed rules.styles/styles.css— setmain > .section:first-of-typetop margin to38px(small standalone top-of-page spacing tweak requested separately; happy to split it out if you'd prefer).LCP & accessibility
<picture>is promoted toloading="eager"+fetchpriority="high"and is the LCP element.<video>(muted / loop / autoplay / playsinline) is attached only after theloadevent, so it doesn't compete with LCP; it fades in once playing (no black-frame flash).prefers-reduced-motion: reduceno video is created — the poster remains. If autoplay is blocked, the video element is removed and the poster stays.Verified locally
fetchpriority=high, video attaches after load and plays (muted/loop/playsinline), content = H1 + subtext + CTA (video-URL paragraph excluded).<video>created, poster still eager.Note
The "Book Now" CTA is a plain authored link, so it's low-contrast over the bright video (pre-existing). Not changed here — can strengthen the overlay or make it an accent button in a follow-up if desired.
🤖 Generated with Claude Code