VideoPreview

A preview of a video.

This is a video preview that links to a video page. The video does not start playing when clicked.

Props

A VideoPreview component has the following properties:

Prop	Required	Description
`value`	yes	Type `Video` (video from a content collection).
`as`	no	Heading element for the title (`h2`–`h6`, default: `h2`).
`showDescription`	no	Set to `false` to hide the description.
`class`	no	Additional Tailwind classes.

Examples

With description

VS Code finally supports Git Worktrees

Discover Git worktrees in VS Code: work on multiple branches simultaneously without stashing, create clean workspaces, and boost your productivity.

<script lang="ts">
	import { VideoPreview } 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: work on multiple branches simultaneously without stashing, create clean workspaces, and boost your productivity.',
		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>

<VideoPreview value={video} as="h3" />

Without description

VS Code finally supports Git Worktrees

<script lang="ts">
	import { VideoPreview } 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: work on multiple branches simultaneously without stashing, create clean workspaces, and boost your productivity.',
		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>

<VideoPreview value={video} as="h3" showDescription={false} />

Flexbox example

VS Code finally supports Git Worktrees

Imagine a long, deliberately over-explained description that keeps going long enough to demonstrate how the video preview handles dense copy, wrapping, spacing, and line clamping when the text becomes far more verbose than a normal summary, including extra detail about branching workflows, workspace switching, parallel feature development, clean checkouts, reduced context loss, and the general joy of not having to stash changes every time you want to jump between branches.

VS Code finally supports Git Worktrees

Discover Git worktrees in VS Code: work on multiple branches simultaneously without stashing, create clean workspaces, and boost your productivity.

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

	const videos: Video[] = [
		{
			id: 'BbEYnN-1c5Q',
			title: 'VS Code finally supports Git Worktrees',
			description:
				'Imagine a long, deliberately over-explained description that keeps going long enough to demonstrate how the video preview handles dense copy, wrapping, spacing, and line clamping when the text becomes far more verbose than a normal summary, including extra detail about branching workflows, workspace switching, parallel feature development, clean checkouts, reduced context loss, and the general joy of not having to stash changes every time you want to jump between branches.',
			publishedDate: '2026-03-13',
			aspectRatio: '16 / 9',
			thumbnailUrl: 'https://i.ytimg.com/vi/BbEYnN-1c5Q/maxresdefault.jpg',
			path: '/videos/the-state-of-european-hosting-alternatives',
			_meta: {}
		},
		{
			id: 'x1mjUh6-azc',
			title: 'VS Code finally supports Git Worktrees',
			description:
				'Discover Git worktrees in VS Code: work on multiple branches simultaneously without stashing, create clean workspaces, and boost your productivity.',
			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>

<div class="flex flex-wrap gap-6">
	{#each videos as video (video.id)}
		<VideoPreview value={video} as="h3" class="grow basis-100" />
	{/each}
</div>