VideoHeader

A header for a video page.

Props

A VideoHeader component has the following properties:

PropRequiredDescription
valueyesType Video (video from a content collection).
classnoAdditional Tailwind classes.

Examples

With tags

Video

Introduction to SvelteKit

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

	const video = {
		id: 'dQw4w9WgXcQ',
		title: 'Introduction to SvelteKit',
		description: 'Learn the basics of SvelteKit and how to build modern web applications.',
		publishedDate: '2025-12-07',
		aspectRatio: '16 / 9',
		thumbnailUrl: 'https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg',
		tags: [
			{
				id: 'svelte',
				label: 'Svelte',
				path: '/',
				_meta: {
					filePath: 'svelte.json',
					fileName: 'svelte.json',
					directory: '.',
					extension: 'json',
					path: 'svelte'
				}
			},
			{
				id: 'sveltekit',
				label: 'SvelteKit',
				path: '/',
				_meta: {
					filePath: 'sveltekit.json',
					fileName: 'sveltekit.json',
					directory: '.',
					extension: 'json',
					path: 'sveltekit'
				}
			}
		],
		_meta: {
			filePath: 'introduction-to-sveltekit/+page.md',
			fileName: '+page.md',
			directory: 'introduction-to-sveltekit',
			extension: 'md',
			path: 'introduction-to-sveltekit/+page'
		},
		path: '/videos/introduction-to-sveltekit'
	};
</script>

<VideoHeader value={video} />

No tags

Video

Building Ultra-Responsive Web Applications with SvelteKit: Advanced Techniques, Performance Optimization, and Real-World Best Practices

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

	const video = {
		id: 'dQw4w9WgXcQ',
		title:
			'Building Ultra-Responsive Web Applications with SvelteKit: Advanced Techniques, Performance Optimization, and Real-World Best Practices',
		description:
			'Discover how to leverage SvelteKit and modern web technologies to create blazing-fast, accessible applications that scale. We dive deep into advanced patterns, optimization strategies, and industry best practices.',
		publishedDate: '2025-12-08',
		aspectRatio: '16 / 9',
		thumbnailUrl: 'https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg',
		_meta: {
			filePath: 'building-ultra-responsive-web-applications-with-sveltekit/+page.md',
			fileName: '+page.md',
			directory: 'building-ultra-responsive-web-applications-with-sveltekit',
			extension: 'md',
			path: 'building-ultra-responsive-web-applications-with-sveltekit/+page'
		},
		path: '/videos/building-ultra-responsive-web-applications-with-sveltekit'
	};
</script>

<VideoHeader value={video} />