# Video on landing pages without killing your LCP
> Hero videos and YouTube embeds are the fastest way to a 6-second LCP. Learn what counts as the LCP element for video, the poster and facade patterns that keep it under 2.5 s, plus WordPress settings.
Updated 2026-09-25 · Speed & Core Web Vitals · HTML version: https://getreport.app/guides/video-on-landing-pages-without-killing-lcp
A video above the fold is the most expensive thing a landing page can ask a phone to do before the visitor has read a word. A YouTube embed pulls in hundreds of kilobytes of scripts before a frame appears; a self-hosted autoplay clip competes with the page for the same bandwidth its hero image needs. Both push Largest Contentful Paint past 2.5 s and, done carelessly, add layout shift on top. This guide shows what the browser counts as the LCP element when video is involved, and the three patterns that let you keep the video and pass the metric.
## Quick answer
- Give every video a **poster image** and make that poster the LCP element: a compressed WebP or AVIF sized to the viewport, with `fetchpriority="high"` where it is an `` element, Chrome uses whichever comes first: the poster image once it has loaded, or the first frame of the video once it is presented, which since 2023 includes autoplaying video. In practice that means one of three things becomes your LCP element:
- **The poster image**, if there is one and it is big. This is the case you want, because a poster is a plain image and every LCP image technique applies.
- **The first video frame**, for an autoplaying clip without a poster. The browser has to download enough of the file to decode a frame, which on a 4 MB MP4 over 4G is seconds.
- **Something else entirely** when the player is an iframe. A YouTube embed is not content the browser can measure, so LCP falls to the largest headline or image around it, while the embed's scripts delay everything by competing for the network and the main thread. Google's [LCP documentation](https://web.dev/articles/lcp) lists which elements are candidates.
### Where the seconds go
A standard YouTube iframe loads the player page, its stylesheets, several scripts and the thumbnail before the play button responds, typically well over 500 KB across a dozen requests, most of it JavaScript that has to parse and run on the phone. Vimeo is lighter but the same shape. None of it is your content, and all of it happens before or alongside your hero image.
A self-hosted `` is cheaper in scripts and worse in bytes. The browser starts fetching the file immediately, at the same time as the hero image, the fonts and the stylesheet. On a slow connection everything arrives later, and the LCP image finishes after the video's first frame did.
Late players add a third cost. A YouTube iframe without dimensions, or a video widget that injects its player after a script loads, pushes the content below it down, and that jump is Cumulative Layout Shift.
## How getReport checks it
> **Free tool:** [Website speed test](https://getreport.app/tools/speed-test): Lighthouse lab results and real-user Core Web Vitals for any page, mobile and desktop, with a filmstrip, a request waterfall and a fix for every slow part. Free, no signup.
The speed module runs Lighthouse on a throttled mobile connection and names the LCP element under the lab table, so you can see whether the poster, the video or the headline decided the metric:
> **Check: Largest Contentful Paint.** LCP is when the biggest thing on screen — usually the hero image or headline — finishes loading. Visitors judge "is this site slow?" on it, and Google uses it for ranking.
>
> 1. Find the LCP element (named in your report) and make it lighter, earlier or both — a compressed WebP/AVIF, sized to the screen, without lazy loading.
> 2. Preload it with ` elements that carry the `autoplay` attribute after the page has rendered, so a player added by a script is counted too. It is a low-weight warning by design: a muted background loop under 1 MB is acceptable, and the finding is there to make you check the size.
> **Check: Total image weight.** Images are usually the heaviest part of a page. Over 1.5 MB in total, or a single image over 500 KB, adds seconds on mobile and costs visitors real data.
>
> 1. Resize images to the size they are shown at (a 400 px wide photo does not need a 4000 px file).
> 2. Convert to WebP or AVIF and compress to about 80 % quality; CMS plugins and CDNs can do this automatically.
The image weight finding counts every image the browser downloaded while loading the page. A 900 KB poster shows here as the largest image; a poster served at 4000 px for a 400 px phone screen is the same mistake as an oversized hero photo, and the [LCP guide](https://getreport.app/guides/fix-largest-contentful-paint) has the sizing steps.
## Step by step
### 1. Make the poster the LCP element
Every `` gets a `poster`. Export it as WebP or AVIF at the size it is displayed (1200 px wide is enough for phones and most laptops; 100–200 KB), and give it `width` and `height` so the space is reserved before anything loads:
```html
```
`preload="none"` tells the browser not to fetch any of the video until the visitor presses play; `preload="metadata"` fetches only the headers and duration, which is fine for a video with controls and a visible length. Either way the poster is the only thing that downloads on page load, so it is the LCP candidate, and it loads at normal image priority.
To get the poster fetched earlier, preload it from ``; a `poster` attribute has no `fetchpriority`, so the preload is how you raise it:
```html
` on click. Then `fetchpriority="high"` goes straight on the `
```
The rules that keep this cheap:
- **Under 1 MB.** A 6–10 s loop at 720p, no audio track, encoded at a low bitrate, lands at 500–900 KB. Anything longer belongs behind a play button.
- **`muted` and `playsinline`.** Browsers only autoplay muted video, and iPhones only play inline with `playsinline`; without it the clip opens full screen or not at all.
- **Still give it a poster.** The poster paints first and becomes the LCP element while the first frame is still decoding.
- **Respect reduced motion.** Visitors who set "reduce motion" in their OS asked for no moving backgrounds. Stop the loop and keep the poster:
```js
// After the DOM is ready
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelectorAll('video.hero-loop[autoplay]').forEach((v) => {
v.removeAttribute('autoplay');
v.pause();
});
}
```
### 3. YouTube and Vimeo: load a facade, not the player
A facade is a thumbnail and a play button that look like the player and load it only on click. The visitor who never plays the video (most of them) never pays for it. The lightest option is the `lite-youtube-embed` web component: one small script and stylesheet, the thumbnail from YouTube's image CDN, and the real iframe only after the click:
```html
```
Self-hosting the poster (the `background-image` line) lets you serve a compressed WebP instead of YouTube's JPEG and keeps the LCP element on your own domain. Without a library, a plain thumbnail and button with a few lines of JavaScript does the same:
```html
```
A real `` keeps it keyboard-reachable; `youtube-nocookie.com` avoids setting cookies before the click, which matters for consent as well as speed. Set the same dimensions on the button's ``, so everything above applies.
- **Embed block** for YouTube and Vimeo: WordPress outputs the provider's iframe. Since WordPress 5.7, iframes in post content that have `width` and `height` get `loading="lazy"` automatically, which covers embeds below the fold but does nothing for one in the hero. For an above-the-fold embed use a facade plugin (WP YouTube Lyte and Lazy Load for Videos both replace the iframe with a thumbnail) or WP Rocket's "Replace YouTube iframe with preview image" under Media.
- **Elementor Video widget**: it has a Lazy Load switch in the video options that shows the thumbnail and loads the player on click, and a separate "Image Overlay" setting where you can supply your own compressed poster. Turn both on for hero videos.
- **Theme hero videos** set in the Customizer are usually `` with the original upload as the source. Re-encode the file with the ffmpeg lines above before uploading, and add a poster.
### Shopify
The Video section in Online Store 2.0 themes accepts a Shopify-hosted file or a YouTube/Vimeo URL and lets you set a cover image; upload a compressed cover rather than relying on the generated frame. YouTube and Vimeo added this way load the provider's iframe, so place them below the fold or use a theme that supports a click-to-play thumbnail. Apps that inject video sliders are a third-party cost like any other app.
### Static sites and custom builds
Use the facade pattern from step 3 as a component, and self-host the poster through your image pipeline so it gets the same `srcset` and format conversion as every other image. Frameworks with an image component (Astro, Next.js, Nuxt) can render the poster `