---
title: YouTube
description: Embed a YouTube video by ID.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

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

[Skip to content](#%5Ftop) 

# YouTube

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

See all examples of pages that use YouTube

Used **36** times. 

**Pages**

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

**Partials**

```
import { YouTube } from "~/components"
<YouTube id="XHvmX3FhTwU" />
```

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/components/youtube/#page","headline":"YouTube · Cloudflare Style Guide","description":"Embed a YouTube video by ID.","url":"https://developers.cloudflare.com/style-guide/components/youtube/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-04-24","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/youtube/","name":"YouTube"}}]}
```