Hero video and YouTube embeds without the slowdown

A hero video or a few YouTube embeds can make a page feel alive. They can also be the heaviest things on it, mostly before anyone presses play. The fix is deciding what loads first, what waits for a click and what visitors see meanwhile.

Why does a YouTube embed slow the page down?

Because the standard embed loads YouTube's player with the page, whether or not anyone watches. web.dev notes that many popular embeds include over 100 KB of JavaScript, sometimes up to 2 MB, and puts the saving from lazy loading a YouTube embed at about 500 KB on the initial page load.

loading="lazy" on the iframe holds it back until it nears the viewport, which helps embeds further down, although web.dev warns browser lazy-loading can be inconsistent.

What is a video facade?

A facade is a poster image with a play button that looks like the player; the real player loads only on click. web.dev calls this the import on interaction pattern: show the facade when the page loads, preconnect to the provider when the pointer moves over it, and swap in the real embed on click.

web.dev recommends lite-youtube-embed, used as a <lite-youtube> tag, or you can build your own. The one on this site uses a poster that is also a plain link to the video on YouTube, so it works even if the script fails.

Chrome's documentation warns that autoplay may not work consistently for lazily loaded videos, so test the first tap on a phone. web.dev also advises facades only for secondary content, so critical content still gets indexed.

Does youtube-nocookie.com make an embed private?

More private, not invisible. YouTube's help says privacy-enhanced mode keeps views of an embedded video from personalising the viewer's YouTube experience or ads outside your site, and any ads on the video are non-personalised. To turn it on, change the embed domain to www.youtube-nocookie.com.

The help page doesn't promise that nothing is stored, and a visitor who clicks out may be tracked under the destination's policies. The domain also doesn't change when the player loads, so pair it with a facade.

How do you add a hero video loop that stays fast?

Host a short, silent, compressed file yourself in a <video> element. The attributes do most of the work:

• muted, or no audio track: MDN says autoplay blocking doesn't apply to inaudible video, and Chrome always allows muted autoplay.
• playsinline: web.dev says it is necessary for autoplay on iOS.
• WebM, then MP4: browsers take the first source they can play, so list your preferred format first.
• poster: without one, MDN notes, nothing displays until the first frame is available.
• preload: autoplay overrides it, so it matters for click-to-play videos, where web.dev calls preload="none" the best way to avoid early downloads.

web.dev's reduced-motion guidance includes not autoplaying videos, so we start the loop only when the visitor hasn't asked for less motion; anyone who has sees the poster. Our animation guide covers that setting. WCAG 2.2.2 Pause, Stop, Hide (Level A) also asks for a way to pause motion that starts automatically, lasts over five seconds and sits beside other content, so loops get a pause button.

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

<video id="hero" muted loop playsinline poster="/hero.webp" width="1280" height="720">
  <source src="/hero.webm" type="video/webm">
  <source src="/hero.mp4" type="video/mp4">
</video>

<script>
  if (matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    document.getElementById('hero').play();
  }
</script>

Will a hero video hurt Largest Contentful Paint?

It can, if the video is the largest thing on the first screen. web.dev lists <video> among the elements LCP considers, timed by the poster's load or the first frame, whichever comes first. If both are slow, so is your LCP.

When the video is the LCP candidate, web.dev recommends preloading the poster with fetchpriority="high", since the poster attribute can't take a fetch priority, and not lazy-loading the video. That is the example's first line.

Keep the headline as real HTML text, not burned into the footage, so it shows on the first paint. Chromium also skips full-viewport elements as likely background, so a full-screen video may not count and the LCP falls to the next largest element, such as that headline.

Do website videos need captions?

Yes, if they have speech or meaningful sound. WCAG 1.2.2 Captions (Prerecorded), at Level A, requires captions for prerecorded audio in video, and W3C's Understanding page says captions identify who is speaking and include meaningful sound effects. Criterion 1.2.3, also Level A, asks for audio description or a full text alternative of what the video shows.

On YouTube, upload captions or edit the automatic ones, which YouTube's help says are machine-generated and should always be reviewed. Self-hosted video takes a <track kind="captions"> element with a WebVTT file. MDN also recommends a transcript, for people who need more time.

Where to start

1. Swap each YouTube iframe for a facade on youtube-nocookie.com.
2. Give hero loops muted, playsinline, a poster, WebM and MP4 sources, a reduced-motion check and a pause button.
3. Keep the headline as live text that shows before the video starts.
4. Caption every video with speech, and review automatic captions.

Test in PageSpeed Insights before and after. A website review covers video alongside your other speed issues, and our SEO, speed and AI search service makes the fixes.