---
description: Embed a YouTube video by ID.
title: YouTube
image: https://developers.cloudflare.com/style-guide/build-the-page/components/youtube/og.png?v=189eea31fe530ac8
---

[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.

# YouTube

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

The `YouTube` component is used `36` times on `36` pages.

<details>

<summary>

See all examples of pages that use YouTube

</summary>

Used **36** times.

**Pages**

- <a href="https://developers.cloudflare.com/ai-gateway/features/guardrails/">/ai-gateway/features/guardrails/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-gateway/features/guardrails/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/ai-search/how-to/nlweb/">/ai-search/how-to/nlweb/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-search/how-to/nlweb.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/build-the-app-frontend-5/">/learning-paths/durable-objects-course/series/build-the-app-frontend-5/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/build-the-app-frontend-5.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7/">/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/deploy-your-video-call-app-7.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/introduction-to-series-1/">/learning-paths/durable-objects-course/series/introduction-to-series-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/introduction-to-series-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6/">/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/make-answer-webrtc-calls-6.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4/">/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/real-time-messaging-with-websockets-4.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/serverless-websocket-backend-3/">/learning-paths/durable-objects-course/series/serverless-websocket-backend-3/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/serverless-websocket-backend-3.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/durable-objects-course/series/what-are-durable-objects-2/">/learning-paths/durable-objects-course/series/what-are-durable-objects-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/durable-objects-course/series/what-are-durable-objects-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/r2-intro/series/r2-1/">/learning-paths/r2-intro/series/r2-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/r2-intro/series/r2-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/r2-intro/series/r2-2/">/learning-paths/r2-intro/series/r2-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/r2-intro/series/r2-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/r2-intro/series/r2-3/">/learning-paths/r2-intro/series/r2-3/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/r2-intro/series/r2-3.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/r2-intro/series/r2-4/">/learning-paths/r2-intro/series/r2-4/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/r2-intro/series/r2-4.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/r2-intro/series/r2-5/">/learning-paths/r2-intro/series/r2-5/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/r2-intro/series/r2-5.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/workers/devplat/intro-to-devplat/">/learning-paths/workers/devplat/intro-to-devplat/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/workers/devplat/intro-to-devplat.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/workflows-course/series/workflows-1/">/learning-paths/workflows-course/series/workflows-1/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/workflows-course/series/workflows-1.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/workflows-course/series/workflows-2/">/learning-paths/workflows-course/series/workflows-2/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/workflows-course/series/workflows-2.mdx">Source</a>
- <a href="https://developers.cloudflare.com/learning-paths/workflows-course/series/workflows-3/">/learning-paths/workflows-course/series/workflows-3/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/learning-paths/workflows-course/series/workflows-3.mdx">Source</a>
- <a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-hono-site/">/pages/framework-guides/deploy-a-hono-site/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx">Source</a>
- <a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nuxt-site/">/pages/framework-guides/deploy-a-nuxt-site/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx">Source</a>
- <a href="https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site/">/pages/framework-guides/deploy-an-astro-site/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx">Source</a>
- <a href="https://developers.cloudflare.com/pages/tutorials/build-an-api-with-pages-functions/">/pages/tutorials/build-an-api-with-pages-functions/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/tutorials/build-an-api-with-pages-functions.mdx">Source</a>
- <a href="https://developers.cloudflare.com/realtime/realtimekit/quickstart/">/realtime/realtimekit/quickstart/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/realtime/realtimekit/quickstart.mdx">Source</a>
- <a href="https://developers.cloudflare.com/style-guide/build-the-page/components/youtube/">/style-guide/build-the-page/components/youtube/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/build-the-page/components/youtube.mdx">Source</a>
- <a href="https://developers.cloudflare.com/use-cases/ai/">/use-cases/ai/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/use-cases/ai/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/features/function-calling/">/workers-ai/features/function-calling/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/features/function-calling/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/explore-code-generation-using-deepseek-coder-models/">/workers-ai/guides/tutorials/explore-code-generation-using-deepseek-coder-models/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/explore-code-generation-using-deepseek-coder-models.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/explore-workers-ai-models-using-a-jupyter-notebook/">/workers-ai/guides/tutorials/explore-workers-ai-models-using-a-jupyter-notebook/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/explore-workers-ai-models-using-a-jupyter-notebook.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/how-to-choose-the-right-text-generation-model/">/workers-ai/guides/tutorials/how-to-choose-the-right-text-generation-model/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/how-to-choose-the-right-text-generation-model.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux-newmodels/">/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux-newmodels/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux-newmodels.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux/">/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/image-generation-playground/image-generator-flux.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers-ai/guides/tutorials/image-generation-playground/image-generator-store-and-catalog/">/workers-ai/guides/tutorials/image-generation-playground/image-generator-store-and-catalog/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/guides/tutorials/image-generation-playground/image-generator-store-and-catalog.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers/observability/logs/">/workers/observability/logs/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/observability/logs/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers/observability/query-builder/">/workers/observability/query-builder/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/observability/query-builder.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workers/runtime-apis/rpc/">/workers/runtime-apis/rpc/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/runtime-apis/rpc/index.mdx">Source</a>
- <a href="https://developers.cloudflare.com/workflows/examples/twilio/">/workflows/examples/twilio/</a>-<a href="https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workflows/examples/twilio.mdx">Source</a>

**Partials**

</details>

```mdx
import { YouTube } from "~/components"

<YouTube id="XHvmX3FhTwU" />
```

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/youtube/#page","headline":"YouTube","description":"Embed a YouTube video by ID.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/youtube/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/youtube/og.png?v=189eea31fe530ac8","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/"}}
```
