A header for a video page.
A VideoHeader component has the following properties:
| Prop | Required | Description |
|---|---|---|
value | yes | Type Video (video from a content collection). |
class | no | Additional Tailwind classes. |
<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} />
<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} />