Video

Use VideoSection for a native video player or YouTube embed, optionally paired with text.

svelte

<script>
  import { VideoSection } from '@page-sections/svelte';
</script>

<VideoSection
  section={{
    id: 'tour',
    title: 'Tour',
    headline: 'Meet the garden team',
    video: {
      provider: 'html5',
      src: '/media/tour.mp4',
      poster: '/images/tour.jpg',
      captions: [{ src: '/media/tour-en.vtt', language: 'en', label: 'English' }]
    },
    description: 'A short tour of the shared spaces.',
    videoSide: 'left'
  }}
>
  <p><a href="/tour-transcript">Read the transcript</a>.</p>
</VideoSection>

Props and configuration

Prop	Type	Default
`section`	`Omit<VideoSectionData, 'type'>`	Required
`children`	`Snippet`	Optional accompanying content after description

Alongside SectionDefinition:

Field	Type	Default
`video`	`VideoData`, required	No default
`description`	`string`	Optional plain text
`videoSide`	`'left'` or `'right'`	Left unless right is supplied

Complete VideoData:

Field	Type	Use
`src`	`string`, required	Media URL, or YouTube ID/URL
`provider`	`'html5'` or `'youtube'`, required	Selects rendering
`poster`	`string`	Optional native-video poster; ignored by YouTube renderer
`captions`	`{ src: string; language: string; label: string }[]`	Optional native caption tracks; ignored by YouTube renderer

The data discriminator is video. Native video has controls, playsinline and preload="metadata". There are no autoplay, loop, muted, arbitrary iframe attributes or custom-control props.

YouTube

The source accepts an 11-character ID, a youtu.be URL, or a URL on youtube.com/www.youtube.com/youtube-nocookie.com/www.youtube-nocookie.com. The parser takes the v query value or final path segment and requires an 11-character ID. Valid sources become https://www.youtube-nocookie.com/embed/ID; invalid sources show a plain error paragraph.

The iframe is lazy-loaded, uses strict-origin-when-cross-origin, allows fullscreen and takes its title from headline or title. Provider playback and privacy/consent behavior belong to the provider and host application; the library does not supply a consent manager.

Layout and accessibility

The player uses a 16:9 box and --ps-radius. Media/text stack below 600px container width and use a 1.7:1 split above it. Right changes visual order, not DOM order. Native controls and tracks are in SSR HTML. Provide captions for spoken content and a transcript where appropriate; browser/provider playback requirements still apply.