YouTube

YouTube renders a dependency-free facade: a poster thumbnail with a play overlay that swaps in a privacy-enhanced youtube-nocookie iframe on click. The SSR output is the poster (no-JS friendly). Timestamps seek the player via the composed YoutubeTimestamps + YoutubeTimestampAt parts.

// apps/docs/src/components/examples/youtube/default/react.tsx
import { YouTube } from '@cloudvoyant/helical-react';

export default function ReactYouTubeDefault() {
  return <YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />;
}

<!-- apps/docs/src/components/examples/youtube/default/svelte.svelte -->
<script lang="ts">
  import { YouTube } from '@cloudvoyant/helical-svelte';
</script>

<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

Timestamps

YoutubeTimestamps auto-infers chapters from the video’s web metadata (fetched via an oEmbed proxy) when given no children, and accepts manual YoutubeTimestampAt overrides:

<YouTube url="https://www.youtube.com/watch?v=...">
  <YoutubeTimestamps>
    <YoutubeTimestampAt t={0}>Intro</YoutubeTimestampAt>
    <YoutubeTimestampAt t={43}>Chorus</YoutubeTimestampAt>
  </YoutubeTimestamps>
</YouTube>

Examples

Timestamps

// apps/docs/src/components/examples/youtube/timestamps/react.tsx
import { YouTube, YoutubeTimestamps, YoutubeTimestampAt } from '@cloudvoyant/helical-react';

export default function ReactYouTubeTimestamps() {
  return (
    <YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
      <YoutubeTimestamps>
        <YoutubeTimestampAt t={0}>Intro</YoutubeTimestampAt>
        <YoutubeTimestampAt t={43}>Chorus</YoutubeTimestampAt>
        <YoutubeTimestampAt t={128}>Bridge</YoutubeTimestampAt>
      </YoutubeTimestamps>
    </YouTube>
  );
}

<!-- apps/docs/src/components/examples/youtube/timestamps/svelte.svelte -->
<script lang="ts">
  import { YouTube, YoutubeTimestamps, YoutubeTimestampAt } from '@cloudvoyant/helical-svelte';
</script>

<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
  <YoutubeTimestamps>
    <YoutubeTimestampAt t={0}>Intro</YoutubeTimestampAt>
    <YoutubeTimestampAt t={43}>Chorus</YoutubeTimestampAt>
    <YoutubeTimestampAt t={128}>Bridge</YoutubeTimestampAt>
  </YoutubeTimestamps>
</YouTube>

API Reference

Prop	Type	Description
`url`	`string`	Video URL (`youtube.com/watch?v=…` / `youtu.be/…`). Required.
`title`	`string`	Optional heading.
`description`	`string`	Optional description.
`poster`	`string`	Optional poster URL (defaults to the hqdefault thumbnail).

YoutubeTimestamps — composes inside YouTube; chapters prop overrides, otherwise auto-inferred from metadata. YoutubeTimestampAt — child entry with t (seconds) and description as children.