# Video

A YouTube video taken from the search results for the topic.



## The block

As the API returns it, from the [example article](https://api.seoforsaas.dev/public/v1/fixtures/article):

```json
{
  "type": "video",
  "provider": "youtube",
  "videoId": "0eKVizvYSUQ",
  "url": "https://www.youtube.com/watch?v=0eKVizvYSUQ",
  "title": "How Google Search Works (in 5 minutes)",
  "id": "video-15"
}
```

## Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

```tsx
import { Article, defaultComponents } from "@/components/seoforsaas/article";
import type { VideoBlock } from "@/lib/seoforsaas/types";

const DefaultVideo = defaultComponents.video;

function MyVideo({ block }: { block: VideoBlock }) {
  return (
    <div className="my-video">
      <DefaultVideo block={block} />
    </div>
  );
}

<Article blocks={article.blocks} components={{ video: MyVideo }} />
```

## Notes

- A lite embed: a poster until the reader clicks, so no third-party script loads with the page.
- The only client component. Without JavaScript the poster links to YouTube.