# Video: hero opener & how-to walkthrough

## Hero opener looks pixelated?

The builder embeds **`public/FreeAgentMaker_Opener_3.mp4`** (and an iOS-safe fallback). The player is **up to ~1000px wide** with **`object-fit: cover`** (`styles.css`), so a **low-resolution or low-bitrate** file will look soft or blocky when scaled.

1. **Re-export the master** at **1920×1080** (or at least **1280×720**) H.264, with enough **bitrate** (often **5–10 Mbps** for 1080p mixed content; higher if there’s a lot of motion or text).
2. **Replace** `FreeAgentMaker_Opener_3.mp4` (and re-encode **`FreeAgentMaker_Opener_3_ios_compat.mp4`** from the same master if you keep that fallback—Baseline profile, slightly lower bitrate is OK for phones).
3. **Poster** — use a sharp frame at **`FreeAgentMaker_Opener_3_poster.jpg`** (e.g. 1920×1080 JPEG ~80–90% quality).

`index.html` lists the **main** MP4 **before** the iOS-compat source so typical desktop browsers load the higher-quality file first.

You **cannot** fix true pixelation in CSS alone if the pixels aren’t in the file—**a better source encode** (or new export) is what fixes it.

---

## How-to walkthrough (after you record)

After you record using **[HOW-TO-VIDEO-RECORDING-CHECKLIST.md](./HOW-TO-VIDEO-RECORDING-CHECKLIST.md)** and **[HOW-TO-VIDEO-SCRIPT.md](./HOW-TO-VIDEO-SCRIPT.md)**:

1. **Export** — H.264 MP4 (1080p or 720p) for broad compatibility; keep file size reasonable for mobile.
2. **Host** — Choose one:
   - **YouTube / Vimeo** — Unlisted or public; copy the watch URL or embed URL.
   - **Your CDN / object storage** — e.g. S3 + CloudFront, Cloudflare R2, etc.
   - **Repo / static site** — Place under `public/` (e.g. `public/HowTo-Create-Your-Agent.mp4`) if your deploy includes `public/`.
3. **Link from the site** — Add a prominent link next to the opener video or under **Demo script** in `index.html`, for example:
   - A line: `Watch: How to create your agent (~3 min)` → your URL.
   - Or an extra `<source>` / `<a>` if self-hosting MP4 next to `FreeAgentMaker_Opener_3*.mp4`.
4. **Track clicks** (optional) — Use `data-track-doc` + `product_doc_link_clicked` pattern, or UTM params on the video URL.

The builder already links to the **script** and **recording checklist** under the hero video (`#how-to-video-resources-section`).