How to Embed AI-Generated Video Without Destroying Website Performance

There's a silent trap in synthetic media production: generating the video gets cheaper every month, but embedding it well on the web stays stubbornly hard. As brands and agencies produce more AI video —Sora 2, Seedance, Wan, Kling, and the rest— the problem multiplies: ten poorly optimized videos can destroy LCP, CLS, and INP on any content site.

This article isn't a tool list. It's a decision framework based on real implementations for classifying every video you produce by its role on the page and choosing the right embedding strategy without sacrificing Core Web Vitals.

The hidden cost of synthetic video

AI-generated video has characteristics that make it uniquely expensive for web performance:

1. Unpredictable bitrates. Generative models produce output with variable compression. A 30-second video can weigh anywhere from 8 MB to 45 MB depending on the model and scene complexity.
2. No streaming metadata. Most AI platforms output straight MP4 files, not HLS or DASH segments ready for the web.
3. No resolution variants. A single synthetic video typically comes in one resolution, forcing you to serve 1080p to a phone on 3G.

In a recent project for an editorial client in Mexico City, an article with three AI-generated videos (two demo, one decorative) went from 1.2 MB to 23 MB in total page weight. LCP jumped from 1.8s to 6.4s. The problem wasn't the video — it was how we embedded it.

The four embedding strategies

Not every video deserves the same treatment. We classify each asset into one of four tiers based on its function on the page:

Tier 1: Poster-first for decorative video

Decorative video (animated backgrounds, section transitions, ambiance) is the easiest to optimize but the most commonly done wrong. The rule is simple: never let decorative video compete for resources with real content.

<!-- Decorative video with poster-first -->
<video
  poster="/images/poster-section-avif.webp"
  preload="none"
  muted
  loop
  playsinline
  aria-hidden="true"
>
  <source src="/video/decorative-av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="/video/decorative-hevc.mp4" type="video/mp4; codecs=hvc1.1.6.L120.90">
  <source src="/video/decorative-h264.mp4" type="video/mp4">
</video>

The poster should be AVIF or WebP, not a video frame. In our pipeline, we generate AVIF posters at max 1920px and serve them with loading="lazy". The video never downloads until the browser decides the user might see it — and with preload="none", most browsers won't even start the download until the video enters the viewport.

Tier 2: Thumbnail + click-to-play

For explanatory or demo videos —tutorials, product showcases, synthetic testimonials— the thumbnail with on-demand playback strategy offers the best balance between visibility and performance.

The pattern is straightforward: a static image (first frame capture or AI-generated thumbnail) with a play button overlay. The actual <video> element doesn't mount until the user clicks. In implementation:

1. Render <img> with the thumbnail as the primary element
2. CSS overlay play button
3. On click, hide the image and mount the <video>
4. Start playback automatically
5. On scroll-out-of-viewport, pause and free resources

In our tests with Astro 6 and 7, this strategy reduced initial page weight by 73% for articles with 2-3 videos. LCP stayed under 2.5s even on simulated 3G connections.

Tier 3: Adaptive streaming for core content

When the video is the content —not decoration— you need HLS or DASH. Direct MP4 won't cut it. A 5-minute 1080p video weighs between 60 and 200 MB. Downloading it entirely before playing isn't viable.

The architecture we use:

The critical step most people miss: the poster must be in the HTML before the player. When HLS.js starts, it needs to download the manifest (.m3u8), negotiate the initial segment, and decode it. Without a poster, that time (1-3 seconds on average) is dead LCP.

For AI-generated content, transcoding to HLS segments is especially important because generative model output bitrates are inconsistent. FFmpeg with -crf 23 in AV1 produces consistent ~2-4 Mbps segments that ABR handles well.

Tier 4: Hero with optimized poster

The autoplay hero video —the one you see when loading a page— is the most complex case because it directly impacts LCP. The strategy here prioritizes the poster over the video:

1. Render <img> with optimized AVIF poster (≤100 KB, 1920px)
2. The poster is the LCP candidate (must load before the video)
3. <video> with preload="none", autoplay, and poster pointing to the same AVIF
4. On click or LCP completion, start playback
5. Use IntersectionObserver to pause if out of viewport

We implemented this pattern in a creative portfolio site redesign using AI-generated video as hero. LCP went from 4.2s to 1.9s —without sacrificing autoplay— simply by moving the poster to the critical path and relegating the video to the background.

Accessibility for synthetic video: not optional

The European Accessibility Act (EAA) 2025 and WCAG 3.0 (Bronze as baseline since 2026) require every video to have text alternatives. For AI-generated video, this means:

• Transcripts generated by the same model that created the video. Many platforms (Synthesia, HeyGen) already export automatic VTT. If your pipeline doesn't include this, you're non-compliant from day one.
• Captions, embedded or sidecar. For synthetic video with generated voice, synchronized captions are mandatory. We serve WebVTT with <track> and fallback to embedded JSON.
• Automatic animation pause. If decorative video has motion, it must respect prefers-reduced-motion. In Astro, we handle this with CSS media queries that show the static poster instead of video when the preference is active.

When NOT to use synthetic video on the web

Based on mistakes we've made and fixed:

1. Never embed 3+ autoplay videos on the same page. The browser competes with itself for bandwidth. Our limit is one hero autoplay + one on-demand video per section, maximum.
2. Don't serve direct MP4 for videos over 60 seconds. The user experience degrades, ABR doesn't work, and mobile data bills spike.
3. Don't generate videos at resolutions you won't use. If the container design is 720px, generating in 4K is wasting bandwidth and storage.
4. Don't assume AI-generated video has correct metadata. Always verify bitrate, actual duration, and codec profile before publishing.

Decision matrix: which strategy to use

Is the video decorative or background?
  → Yes → Tier 1: Poster-first
  → No → Is the video essential to understanding the content?
    → Yes → Does it last more than 60 seconds?
      → Yes → Tier 3: Adaptive streaming
      → No → Tier 2: Thumbnail + click-to-play
    → No → Is it above the fold?
      → Yes → Tier 4: Hero with poster
      → No → Tier 1: Poster-first

This decision tree is what we use internally on every project involving synthetic media. It has saved us countless performance budget iterations and, more importantly, frustrated clients whose sites loaded slowly.

If you're producing AI-generated video and need to integrate it into websites without destroying performance, we can help design the publishing pipeline. You might also be interested in our adaptive video analysis with Astro or the accessibility framework for synthetic media.