Content

Generation Script: This file is generated from script(s): tools/scripts/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/component-registry.json.
Run when: Component governance metadata, registry outputs, or published component-library templates change.
Important: Do not manually edit this file; run node tools/scripts/generate-component-docs.js --fix --template-only --category content.

Back to Component Library

Return to the generated component library landing page.

Renderers for reader-facing media, code, quotations, and structured content. This category currently contains 24 governed export(s).

Decision Tree Excerpt

Bound to an external data source or automation pipeline? data/
Only makes sense on frame-mode or portal pages? page-structure/
Accepts children and arranges them spatially? layout/
Formats or renders content for the reader? content/
Otherwise: primitives/

Summary Table

Component	Tier	Status	Import path	Description
CardVideo	`composite`	`stable`	`/snippets/components/content/video.jsx`	Card Video content component for rendering reader-facing documentation content.
CodeComponent	`composite`	`stable`	`/snippets/components/content/code.jsx`	Code Component content component for rendering reader-facing documentation content.
CodeSection	`composite`	`stable`	`/snippets/components/content/code.jsx`	Thin wrapper that maps a `fields` object into the complex code block renderer.
ComplexCodeBlock	`composite`	`stable`	`/snippets/components/content/code.jsx`	Complex Code Block content component for rendering reader-facing documentation content.
CustomCodeBlock	`composite`	`stable`	`/snippets/components/content/code.jsx`	Custom Code Block content component for rendering reader-facing documentation content.
CustomResponseField	`composite`	`stable`	`/snippets/components/content/responseField.jsx`	Renders the custom response field component
EmbedMarkdown	`composite`	`stable`	`/snippets/components/content/embed.jsx`	Embed Markdown content component for rendering reader-facing documentation content.
ExternalContent	`composite`	`stable`	`/snippets/components/content/external-content.jsx`	External Content content component for rendering reader-facing documentation content.
FrameQuote	`composite`	`stable`	`/snippets/components/content/quote.jsx`	Frame Quote content component for rendering reader-facing documentation content.
LinkedInEmbed	`composite`	`stable`	`/snippets/components/content/video.jsx`	Linked In Embed content component for rendering reader-facing documentation content.
MarkdownEmbed	`composite`	`stable`	`/snippets/components/content/embed.jsx`	Markdown Embed content component for rendering reader-facing documentation content.
Quote	`composite`	`stable`	`/snippets/components/content/quote.jsx`	Quote content component for rendering reader-facing documentation content.
ResponseFieldAccordion	`composite`	`stable`	`/snippets/components/content/responseField.jsx`	Renders the response field accordion component
ResponseFieldExpandable	`composite`	`stable`	`/snippets/components/content/responseField.jsx`	Renders the response field expandable component
ResponseFieldGroup	`composite`	`stable`	`/snippets/components/content/responseField.jsx`	Renders the response field group component
ScrollableDiagram	`composite`	`stable`	`/snippets/components/content/zoomableDiagram.jsx`	──────────────────────────────────────────────────────────────
ShowcaseVideo	`composite`	`stable`	`/snippets/components/content/video.jsx`	Showcase Video content component for rendering reader-facing documentation content.
TitledVideo	`composite`	`stable`	`/snippets/components/content/video.jsx`	Titled Video content component for rendering reader-facing documentation content.
TwitterTimeline	`composite`	`stable`	`/snippets/components/content/embed.jsx`	Twitter Timeline content component for rendering reader-facing documentation content.
ValueResponseField	`composite`	`stable`	`/snippets/components/content/responseField.jsx`	CustomResponseField - ResponseField wrapper that hides the bottom divider
Video	`composite`	`stable`	`/snippets/components/content/video.jsx`	Video content component for rendering reader-facing documentation content.
YouTubeVideo	`composite`	`stable`	`/snippets/components/content/video.jsx`	You Tube Video content component for rendering reader-facing documentation content.
YouTubeVideoData	`composite`	`stable`	`/snippets/components/content/video.jsx`	You Tube Video Data content component for rendering reader-facing documentation content.
YouTubeVideoDownload	`composite`	`deprecated`	`/snippets/components/content/video.jsx`	You Tube Video Download content component for rendering reader-facing documentation content.

Component Reference

CardVideo

Use CardVideo when you need card Video content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Card Video content component for rendering reader-facing documentation content. Import path

import { CardVideo } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: LinkedInEmbed, TitledVideo, Video, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/primer.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `any` | | Yes | title prop. | | style | any | “ | Yes | style prop. |

Code example

<CardVideo embedUrl="example" title="example" />

CodeComponent

Use CodeComponent when you need code Component content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Code Component content component for rendering reader-facing documentation content. Import path

import { CodeComponent } from '/snippets/components/content/code.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CodeSection, ComplexCodeBlock, CustomCodeBlock
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/run-a-gateway/install/linux-install.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | string | "" | No | filename prop. | | icon | string | "terminal" | No | icon prop. | | language | string | "" | No | language prop. | | highlight | string | "" | No | highlight prop. | | expandable | boolean | false | No | expandable prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. |

Code example

<CodeComponent />

CodeSection

Use CodeSection when you need thin wrapper that maps a fields object into the complex code block renderer.. Best suited for tutorial, concept, reference page types. Source description: Thin wrapper that maps a fields object into the complex code block renderer. Import path

import { CodeSection } from '/snippets/components/content/code.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: ComplexCodeBlock, CustomCodeBlock
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | fields prop. |

Code example

<CodeSection />

ComplexCodeBlock

Use ComplexCodeBlock when you need complex Code Block content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Complex Code Block content component for rendering reader-facing documentation content. Import path

import { ComplexCodeBlock } from '/snippets/components/content/code.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CodeSection, CustomCodeBlock
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | any | null | No | pre Note prop. | | postNote | any | null | No | post Note prop. |

Code example

<ComplexCodeBlock filename="example" icon="example" />

CustomCodeBlock

Use CustomCodeBlock when you need custom Code Block content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Custom Code Block content component for rendering reader-facing documentation content. Import path

import { CustomCodeBlock } from '/snippets/components/content/code.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CodeSection, ComplexCodeBlock
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx, v2/gateways/run-a-gateway/install/linux-install.mdx, v2/gateways/run-a-gateway/install/windows-install.mdx, v2/orchestrators/old/orchestrators-portal.mdx, v2/orchestrators/old/setting-up-an-orchestrator/connect-to-arbitrum.mdx, v2/orchestrators/old/setting-up-an-orchestrator/install-go-livepeer.mdx, and 9 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | string | "" | No | pre Note prop. | | postNote | string | "" | No | post Note prop. | | output | string | "" | No | output prop. |

Code example

<CustomCodeBlock filename="example" icon="example" />

CustomResponseField

Use CustomResponseField when you need renders the custom response field component. Best suited for how_to page types. Source description: Renders the custom response field component Import path

import { CustomResponseField } from '/snippets/components/content/responseField.jsx'

Metadata

Content affinity: how_to
Dependencies: ResponseFieldAccordion, ResponseFieldExpandable, ResponseFieldGroup, ValueResponseField
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx, v2/gateways/run-a-gateway/configure/video-configuration.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `props` | `object` | | No | Additional props forwarded to ResponseField. |

Code example

<CustomResponseField description="Example" />

EmbedMarkdown

Use EmbedMarkdown when you need embed Markdown content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Embed Markdown content component for rendering reader-facing documentation content. Import path

import { EmbedMarkdown } from '/snippets/components/content/embed.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: MarkdownEmbed
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | url | any | “ | Yes | url prop. |

Code example

<EmbedMarkdown url="example" />

ExternalContent

Use ExternalContent when you need external Content content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: External Content content component for rendering reader-facing documentation content. Import path

import { ExternalContent } from '/snippets/components/content/external-content.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | repoName | any | | Yes | repo Name prop. | | `githubUrl` | `any` | | Yes | github Url prop. | | maxHeight | string | "1000px" | No | max Height prop. | | icon | string | "github" | No | icon prop. | | children | any | “ | Yes | children prop. |

Code example

<ExternalContent repoName="example" githubUrl="example">Example content</ExternalContent>

FrameQuote

Use FrameQuote when you need frame Quote content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Frame Quote content component for rendering reader-facing documentation content. Import path

import { FrameQuote } from '/snippets/components/content/quote.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/overview.mdx, v2/home/about-livepeer/benefits.mdx, v2/home/about-livepeer/ecosystem.mdx, v2/home/about-livepeer/vision.mdx, v2/internal/overview/docs-philosophy.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `author` | `any` | | Yes | author prop. | | source | any | | Yes | source prop. | | `href` | `any` | | Yes | href prop. | | frame | boolean | true | No | frame prop. | | align | string | 'right' | No | align prop. | | borderColor | any | | Yes | border Color prop. | | `img` | `any` | | Yes | img prop. | | spacing | boolean | true | No | spacing prop. | | props | any | “ | Yes | props prop. |

Code example

<FrameQuote author="example" source="example">Example content</FrameQuote>

LinkedInEmbed

Use LinkedInEmbed when you need linked In Embed content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Linked In Embed content component for rendering reader-facing documentation content. Import path

import { LinkedInEmbed } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, TitledVideo, Video, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `"Embedded post"` | No | title prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. | | height | string | "399" | No | height prop. |

Code example

<LinkedInEmbed embedUrl="example" caption="example" />

MarkdownEmbed

Use MarkdownEmbed when you need markdown Embed content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Markdown Embed content component for rendering reader-facing documentation content. Import path

import { MarkdownEmbed } from '/snippets/components/content/embed.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: EmbedMarkdown
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | url | any | “ | Yes | url prop. |

Code example

<MarkdownEmbed url="example" />

Quote

Use Quote when you need content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Quote content component for rendering reader-facing documentation content. Import path

import { Quote } from '/snippets/components/content/quote.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/about/livepeer-protocol/governance-model.mdx, v2/about/livepeer-protocol/livepeer-token.mdx, v2/about/livepeer-protocol/overview.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/about/livepeer-protocol/treasury.mdx, and 5 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<Quote>Example content</Quote>

ResponseFieldAccordion

Use ResponseFieldAccordion when you need renders the response field accordion component. Best suited for universal page types. Source description: Renders the response field accordion component Import path

import { ResponseFieldAccordion } from '/snippets/components/content/responseField.jsx'

Metadata

Content affinity: universal
Dependencies: CustomResponseField, ResponseFieldExpandable, ResponseFieldGroup, ValueResponseField
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to Accordion. |

Code example

<ResponseFieldAccordion />

ResponseFieldExpandable

Use ResponseFieldExpandable when you need renders the response field expandable component. Best suited for how_to page types. Source description: Renders the response field expandable component Import path

import { ResponseFieldExpandable } from '/snippets/components/content/responseField.jsx'

Metadata

Content affinity: how_to
Dependencies: CustomResponseField, ResponseFieldAccordion, ResponseFieldGroup, ValueResponseField
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to Expandable. |

Code example

<ResponseFieldExpandable />

ResponseFieldGroup

Use ResponseFieldGroup when you need renders the response field group component. Best suited for universal page types. Source description: Renders the response field group component Import path

import { ResponseFieldGroup } from '/snippets/components/content/responseField.jsx'

Metadata

Content affinity: universal
Dependencies: CustomResponseField, ResponseFieldAccordion, ResponseFieldExpandable, ValueResponseField
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | component | string | "accordion" | No | Component used by the component. | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to the selected wrapper component. |

Code example

<ResponseFieldGroup />

ScrollableDiagram

Use ScrollableDiagram when you need ──────────────────────────────────────────────────────────────. Best suited for universal page types. Source description: ────────────────────────────────────────────────────────────── Import path

import { ScrollableDiagram } from '/snippets/components/content/zoomableDiagram.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: medium
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-protocol/livepeer-token.mdx, v2/about/livepeer-protocol/technical-architecture.mdx, v2/gateways/about/architecture.mdx, v2/gateways/references/technical-architecture.mdx, v2/gateways/run-a-gateway/configure/dual-configuration.mdx, v2/gateways/run-a-gateway/configure/video-configuration-view.mdx, and 6 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | “ | Yes | Content rendered inside the component. | | title | string | "" | No | Title text rendered by the component. | | maxHeight | string | "500px" | No | Max height used by the component. | | minWidth | string | "100%" | No | Min width used by the component. | | showControls | boolean | false | No | Boolean flag that controls component behaviour. |

Code example

<ScrollableDiagram>Example</ScrollableDiagram>

ShowcaseVideo

Use ShowcaseVideo when you need showcase Video content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Showcase Video content component for rendering reader-facing documentation content. Import path

import { ShowcaseVideo } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, TitledVideo, Video, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/solutions/showcase.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `any` | | Yes | title prop. | | subtitle | any | “ | Yes | subtitle prop. |

Code example

<ShowcaseVideo src="example" title="example" />

TitledVideo

Use TitledVideo when you need titled Video content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Titled Video content component for rendering reader-facing documentation content. Import path

import { TitledVideo } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, Video, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/home/solutions/showcase.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `any` | | Yes | title prop. | | subtitle | any | “ | Yes | subtitle prop. | | arrow | boolean | false | No | arrow prop. | | borderRadius | string | "12px" | No | border Radius prop. | | style | object | {} | No | style prop. |

Code example

<TitledVideo src="example" title="example" />

TwitterTimeline

Use TwitterTimeline when you need twitter Timeline content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Twitter Timeline content component for rendering reader-facing documentation content. Import path

import { TwitterTimeline } from '/snippets/components/content/embed.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: EmbedMarkdown, MarkdownEmbed
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/livepeer-community/trending-topics.mdx, v2/home/trending.mdx Props No documented props.

Code example

<TwitterTimeline />

ValueResponseField

Use ValueResponseField when you need customResponseField - ResponseField wrapper that hides the bottom divider. Best suited for concept page types. Source description: CustomResponseField - ResponseField wrapper that hides the bottom divider Import path

import { ValueResponseField } from '/snippets/components/content/responseField.jsx'

Metadata

Content affinity: concept
Dependencies: CustomResponseField, ResponseFieldAccordion, ResponseFieldExpandable, ResponseFieldGroup
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/about/livepeer-protocol/core-mechanisms.mdx, v2/gateways/quickstart/gateway-setup.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `post` | `string` | `null` | No | Post used by the component. | | `label` | `string` | `"value"` | No | Label text rendered by the component. | | `line` | `boolean` | `true` | No | Boolean flag that controls component behaviour. | | `children` | `React.ReactNode` | | Yes | Content rendered inside the component. | | props | object | “ | No | Additional props forwarded to ResponseField. |

Code example

<ValueResponseField description="Example" />

Video

Use Video when you need content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: Video content component for rendering reader-facing documentation content. Import path

import { Video } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, TitledVideo, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/solutions/embody/overview.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `caption` | `any` | | Yes | caption prop. | | href | string | "" | No | href prop. | | controls | boolean | true | No | controls prop. | | autoPlay | boolean | false | No | auto Play prop. | | loop | boolean | false | No | loop prop. | | muted | boolean | false | No | muted prop. | | children | any | “ | Yes | children prop. |

Code example

<Video src="example" caption="example">Example content</Video>

YouTubeVideo

Use YouTubeVideo when you need you Tube Video content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: You Tube Video content component for rendering reader-facing documentation content. Import path

import { YouTubeVideo } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, TitledVideo, Video, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/community-portal.mdx, v2/community/livepeer-community/trending-topics.mdx, v2/gateways/run-a-gateway/install/community-projects.mdx, v2/home/about-livepeer/benefits.mdx, v2/home/about-livepeer/evolution.mdx, v2/home/about-livepeer/vision.mdx, and 7 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. |

Code example

<YouTubeVideo embedUrl="example" caption="example" />

YouTubeVideoData

Use YouTubeVideoData when you need you Tube Video Data content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: You Tube Video Data content component for rendering reader-facing documentation content. Import path

import { YouTubeVideoData } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, TitledVideo, Video, YouTubeVideo
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: composite
@usedIn: v2/community/livepeer-community/trending-topics.mdx, v2/home/trending.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. | | limit | any | “ | Yes | limit prop. | | cols | number | 2 | No | cols prop. |

Code example

<YouTubeVideoData limit={1} />

YouTubeVideoDownload

Use YouTubeVideoDownload when you need you Tube Video Download content component for rendering reader-facing documentation content.. Best suited for tutorial, concept, reference page types. Source description: You Tube Video Download content component for rendering reader-facing documentation content. Import path

import { YouTubeVideoDownload } from '/snippets/components/content/video.jsx'

Metadata

Content affinity: tutorial, concept, reference
Dependencies: CardVideo, LinkedInEmbed, TitledVideo, Video, YouTubeVideo, YouTubeVideoData
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: deprecated
Tier: composite
@usedIn: v2/home/primer.mdx

Deprecation note: YouTubeVideoDownload is deprecated and should not be used for new content. See YouTubeVideo. Props

Prop	Type	Default	Required	Description
`embedUrl`	`any`	“	Yes	embed Url prop.
`title`	`any`	“	Yes	title prop.
`hint`	`any`	“	Yes	hint prop.
`caption`	`string`	`""`	No	caption prop.

Code example

<YouTubeVideoDownload embedUrl="example" title="example" />

Resources

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Content

​Decision Tree Excerpt

​Summary Table

​Component Reference

​CardVideo

​CodeComponent

​CodeSection

​ComplexCodeBlock

​CustomCodeBlock

​CustomResponseField

​EmbedMarkdown

​ExternalContent

​FrameQuote

​LinkedInEmbed

​MarkdownEmbed

​Quote

​ResponseFieldAccordion

​ResponseFieldExpandable

​ResponseFieldGroup

​ScrollableDiagram

​ShowcaseVideo

​TitledVideo

​TwitterTimeline

​ValueResponseField

​Video

​YouTubeVideo

​YouTubeVideoData

​YouTubeVideoDownload

Content

Decision Tree Excerpt

Summary Table

Component Reference

CardVideo

CodeComponent

CodeSection

ComplexCodeBlock

CustomCodeBlock

CustomResponseField

EmbedMarkdown

ExternalContent

FrameQuote

LinkedInEmbed

MarkdownEmbed

Quote

ResponseFieldAccordion

ResponseFieldExpandable

ResponseFieldGroup

ScrollableDiagram

ShowcaseVideo

TitledVideo

TwitterTimeline

ValueResponseField

Video

YouTubeVideo

YouTubeVideoData

YouTubeVideoDownload