---
description: Embed a Cloudflare Stream video.
title: Stream
image: https://developers.cloudflare.com/style-guide/build-the-page/components/stream/og.png?v=766dc07ce5031a91
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt  
> Use this file to discover all available pages before exploring further.

# Stream

Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/stream/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/)

The `Stream` component is used `48` times on `46` pages.

<details>

<summary>

See all examples of pages that use Stream

</summary>

Used **48** times.

**Pages**

- <a href="https://developers.cloudflare.com/ai-crawl-control/">/ai-crawl-control/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-crawl-control/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cache/">/cache/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cache/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/china-network/concepts/global-acceleration/">/china-network/concepts/global-acceleration/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/china-network/concepts/global-acceleration.mdx">Source</a>
- <a href="https://developers.cloudflare.com/china-network/">/china-network/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/china-network/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/access-controls/applications/http-apps/self-hosted-public-app/">/cloudflare-one/access-controls/applications/http-apps/self-hosted-public-app/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/access-controls/applications/http-apps/self-hosted-public-app.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/access-controls/applications/non-http/">/cloudflare-one/access-controls/applications/non-http/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/access-controls/applications/non-http/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/">/cloudflare-one/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/">/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/">/cloudflare-one/networks/connectors/cloudflare-tunnel/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-wan/">/cloudflare-one/networks/connectors/cloudflare-wan/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/networks/connectors/cloudflare-wan/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/">/cloudflare-one/team-and-resources/devices/cloudflare-one-client/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/team-and-resources/devices/cloudflare-one-client/troubleshooting/diagnostic-logs/">/cloudflare-one/team-and-resources/devices/cloudflare-one-client/troubleshooting/diagnostic-logs/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/team-and-resources/devices/cloudflare-one-client/troubleshooting/diagnostic-logs.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-one/traffic-policies/">/cloudflare-one/traffic-policies/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/traffic-policies/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/cloudflare-wan/">/cloudflare-wan/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-wan/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/dns/manage-dns-records/">/dns/manage-dns-records/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/dns/manage-dns-records/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/dns/zone-setups/full-setup/setup/">/dns/zone-setups/full-setup/setup/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/dns/zone-setups/full-setup/setup.mdx">Source</a>
- <a href="https://developers.cloudflare.com/fundamentals/api/get-started/create-token/">/fundamentals/api/get-started/create-token/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/fundamentals/api/get-started/create-token.mdx">Source</a>
- <a href="https://developers.cloudflare.com/fundamentals/concepts/how-cloudflare-works/">/fundamentals/concepts/how-cloudflare-works/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/fundamentals/concepts/how-cloudflare-works.mdx">Source</a>
- <a href="https://developers.cloudflare.com/fundamentals/manage-domains/add-site/">/fundamentals/manage-domains/add-site/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/fundamentals/manage-domains/add-site.mdx">Source</a>
- <a href="https://developers.cloudflare.com/fundamentals/manage-members/manage/">/fundamentals/manage-members/manage/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/fundamentals/manage-members/manage.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/china-network-overview/series/china-express-overview-2/">/learning-paths/china-network-overview/series/china-express-overview-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/china-network-overview/series/china-express-overview-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/china-network-overview/series/china-network-main-features-1/">/learning-paths/china-network-overview/series/china-network-main-features-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/china-network-overview/series/china-network-main-features-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/sase-overview-course/series/connect-secure-from-any-network-to-anywhere-4/">/learning-paths/sase-overview-course/series/connect-secure-from-any-network-to-anywhere-4/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/sase-overview-course/series/connect-secure-from-any-network-to-anywhere-4.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/sase-overview-course/series/evolution-corporate-networks-1/">/learning-paths/sase-overview-course/series/evolution-corporate-networks-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/sase-overview-course/series/evolution-corporate-networks-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/sase-overview-course/series/protect-users-from-internet-risks-5/">/learning-paths/sase-overview-course/series/protect-users-from-internet-risks-5/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/sase-overview-course/series/protect-users-from-internet-risks-5.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/sase-overview-course/series/secure-remote-access-to-critical-infrastructure-3/">/learning-paths/sase-overview-course/series/secure-remote-access-to-critical-infrastructure-3/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/sase-overview-course/series/secure-remote-access-to-critical-infrastructure-3.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/sase-overview-course/series/stop-hosting-own-vpn-service-2/">/learning-paths/sase-overview-course/series/stop-hosting-own-vpn-service-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/sase-overview-course/series/stop-hosting-own-vpn-service-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/warp-overview-course/series/warp-basics-1/">/learning-paths/warp-overview-course/series/warp-basics-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/warp-overview-course/series/warp-basics-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/warp-overview-course/series/warp-basics-2/">/learning-paths/warp-overview-course/series/warp-basics-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/warp-overview-course/series/warp-basics-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/load-balancing/load-balancers/create-load-balancer/">/load-balancing/load-balancers/create-load-balancer/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/load-balancing/load-balancers/create-load-balancer.mdx">Source</a>
- <a href="https://developers.cloudflare.com/registrar/get-started/transfer-domain-to-cloudflare/">/registrar/get-started/transfer-domain-to-cloudflare/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/registrar/get-started/transfer-domain-to-cloudflare.mdx">Source</a>
- <a href="https://developers.cloudflare.com/security/analytics/">/security/analytics/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/security/analytics.mdx">Source</a>
- <a href="https://developers.cloudflare.com/security/">/security/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/security/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/speed/optimization/content/compression/">/speed/optimization/content/compression/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/speed/optimization/content/compression.mdx">Source</a>
- <a href="https://developers.cloudflare.com/ssl/concepts/">/ssl/concepts/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/concepts.mdx">Source</a>
- <a href="https://developers.cloudflare.com/ssl/origin-configuration/ssl-modes/full/">/ssl/origin-configuration/ssl-modes/full/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/origin-configuration/ssl-modes/full.mdx">Source</a>
- <a href="https://developers.cloudflare.com/ssl/origin-configuration/ssl-modes/ssl-only-origin-pull/">/ssl/origin-configuration/ssl-modes/ssl-only-origin-pull/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/origin-configuration/ssl-modes/ssl-only-origin-pull.mdx">Source</a>
- <a href="https://developers.cloudflare.com/ssl/troubleshooting/version-cipher-mismatch/">/ssl/troubleshooting/version-cipher-mismatch/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/troubleshooting/version-cipher-mismatch.mdx">Source</a>
- <a href="https://developers.cloudflare.com/style-guide/build-the-page/components/stream/">/style-guide/build-the-page/components/stream/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/build-the-page/components/stream.mdx">Source</a>
- <a href="https://developers.cloudflare.com/tunnel/get-started/">/tunnel/get-started/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/tunnel/get-started/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/tunnel/">/tunnel/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/tunnel/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/turnstile/">/turnstile/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/turnstile/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/waf/get-started/">/waf/get-started/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waf/get-started.mdx">Source</a>
- <a href="https://developers.cloudflare.com/waf/">/waf/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waf/index.mdx">Source</a>

**Partials**

- <a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/troubleshooting/warp-client.mdx">src/content/partials/cloudflare-one/troubleshooting/warp-client.mdx</a>
- <a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/fundamentals/what-is-cloudflare.mdx">src/content/partials/fundamentals/what-is-cloudflare.mdx</a>

</details>

## Import

```mdx
import { Stream } from "~/components";
```

## Usage

<details>

<summary>

Chapters

</summary>

- ![Chapter 1](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/86f22d1f760b77cdc349f89b25b63c3e/thumbnails/thumbnail.jpg?fit=crop&time=30s)**Chapter 1**30s
- ![Chapter 2](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/86f22d1f760b77cdc349f89b25b63c3e/thumbnails/thumbnail.jpg?fit=crop&time=90s)**Chapter 2**1m30s
- ![Chapter 3](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/86f22d1f760b77cdc349f89b25b63c3e/thumbnails/thumbnail.jpg?fit=crop&time=195s)**Chapter 3**3m15s
- ![Chapter 4](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/86f22d1f760b77cdc349f89b25b63c3e/thumbnails/thumbnail.jpg?fit=crop&time=205s)**Chapter 4**3m25s
- ![Chapter 5](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/86f22d1f760b77cdc349f89b25b63c3e/thumbnails/thumbnail.jpg?fit=crop&time=215s)**Chapter 5**3m35s

</details>

<details>

<summary>

Chapters

</summary>

- ![Introduction and WARP GUI Basics](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=0s)**Introduction and WARP GUI Basics**0s
- ![Consumer vs Corporate WARP](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=57s)**Consumer vs Corporate WARP**57s
- ![Device Profiles Explained](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=95s)**Device Profiles Explained**01m35s
- ![WARP Operating Modes](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=132s)**WARP Operating Modes**02m12s
- ![Split Tunneling](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=184s)**Split Tunneling**03m4s
- ![Conclusion](https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/31178cc41d0ec56d42ef892160589635/thumbnails/thumbnail.jpg?fit=crop&time=296s)**Conclusion**04m56s

</details>

```mdx
<Stream
	id="86f22d1f760b77cdc349f89b25b63c3e"
	title="Connect and secure from any network to anywhere"
	thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/Connect-and-secure-from-any-network-to-anywhere.jpg"
	chapters={{
		"Chapter 1": "30s",
		"Chapter 2": "1m30s",
		"Chapter 3": "3m15s",
		"Chapter 4": "3m25s",
		"Chapter 5": "3m35s",
	}}
/>

<Stream file="warp-1-basics" />
```

## `<Stream>` Props

### `id`

**required**

**type:** `string`

The ID of the Stream video.

### `title`

**required**

**type:** `string`

The title of the Stream video.

### `thumbnail`

**type:** `string`

Either a timestamp (i.e `2.5s` or `1m35s`) or a URL to an image.

### `chapters`

**type:** `Record<string, string>`

Optional chapters displayed as cards below the video.

### `expandChapters`

**type:** `boolean`

**default:** `false`

If `chapters` is present, is passed through to the `open` property of the [Details component](https://developers.cloudflare.com/style-guide/build-the-page/components/details/).

### `showMoreVideos`

**type:** `boolean`

**default:** `true`

Whether to show the "Watch more videos on our Developer Channel" link below the video.

### `file`

**type:** `string`

If `file` is provided, the `id`, `title`,` thumbnail` and `chapters` properties cannot be used and are instead retrieved from the YAML file in the [`stream` ↗︎](https://github.com/cloudflare/cloudflare-docs/tree/production/src/content/stream) collection.

Was this helpful?

YesNo

## On this page

[![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/stream/#page","headline":"Stream","description":"Embed a Cloudflare Stream video.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/stream/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/stream/og.png?v=766dc07ce5031a91","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```
