VideoPlayer

A responsive YouTube video component that displays a thumbnail until clicked.

The component displays a thumbnail image with a play button overlay. When clicked, the thumbnail is replaced with a YouTube iframe that autoplays the video. In an ideal world, the player would be loaded only when the user clicks the custom play button. But then autoplay does not work reliably on iOS.

Each VideoPlayer component instance will load and initialize a YouTube iframe immediately when it is mounted, even if the video is never played. This can have performance implications if you use multiple VideoPlayer components on a single page, as each will load a separate iframe and associated resources. When the user clicks the play button, the already initialized player is shown and the video starts playing.

Props

A VideoPlayer component has the following properties:

Prop	Required	Description
`value`	yes	`Video` object from a content collection.
`class`	no	Additional classes.

Examples

16:9 aspect ratio

YouTube video: VS Code finally supports Git Worktrees

<script lang="ts">
	import { VideoPlayer } from '$lib/components/index.js';
	import type { Video } from '$lib/types.js';

	const video: Video = {
		id: 'x1mjUh6-azc',
		title: 'VS Code finally supports Git Worktrees',
		description: 'Discover Git worktrees in VS Code.',
		publishedDate: '2025-12-05',
		aspectRatio: '16 / 9',
		thumbnailUrl: 'https://i.ytimg.com/vi/x1mjUh6-azc/maxresdefault.jpg',
		path: '/videos/vs-code-finally-supports-git-worktrees',
		_meta: {}
	};
</script>

<VideoPlayer value={video} />

4:3 aspect ratio

<script lang="ts">
	import { VideoPlayer } from '$lib/components/index.js';
	import type { Video } from '$lib/types.js';

	const video: Video = {
		id: 'GBTc7eZ-Pyc',
		title: 'Demo video',
		description: 'Demo video.',
		publishedDate: '2025-01-01',
		aspectRatio: '4 / 3',
		thumbnailUrl: 'https://i.ytimg.com/vi/GBTc7eZ-Pyc/maxresdefault.jpg',
		path: '/videos/demo',
		_meta: {}
	};
</script>

<VideoPlayer value={video} />

Timestamps

When the Video object includes a timestamps array, the component renders clickable buttons below the player. Each button shows the mm:ss timestamp and its label. Clicking a button seeks to that position and starts playing.

YouTube video: How to install agent skills as dependencies

<script lang="ts">
	import { VideoPlayer } from '$lib/components/index.js';
	import type { Video } from '$lib/types.js';

	const video: Video = {
		id: 'YdULRvgNODg',
		title: 'How to install agent skills as dependencies',
		description:
			'Learn how to install agent skills as project dependencies in VS Code with GitHub Copilot and Skills.sh.',
		publishedDate: '2026-03-30',
		aspectRatio: '16 / 9',
		thumbnailUrl: 'https://i.ytimg.com/vi/YdULRvgNODg/maxresdefault.jpg',
		path: '/videos/vs-code-finally-supports-git-worktrees',
		timestamps: [
			{ timestamp: '00:00', label: 'Introduction' },
			{ timestamp: '00:23', label: 'What are agent skills?' },
			{ timestamp: '01:49', label: 'Progressive disclosure' },
			{ timestamp: '03:30', label: 'SKILL.md' },
			{ timestamp: '04:37', label: 'Discovering skills' },
			{ timestamp: '06:58', label: 'npx skills' },
			{ timestamp: '08:09', label: 'Installing skills for GitHub Copilot' },
			{ timestamp: '10:59', label: 'Security risk assessment' },
			{ timestamp: '13:54', label: 'Skills with references' },
			{ timestamp: '16:52', label: 'What skills does the agent have?' },
			{ timestamp: '18:21', label: 'More npx skills commands' },
			{ timestamp: '20:21', label: 'Wrap-up' }
		],
		_meta: {}
	};
</script>

<VideoPlayer value={video} />