enhanced-video-sveltekit

enhanced-video-sveltekit is an open-source Vite plugin I made for Svelte and SvelteKit. It’s modelled on @sveltejs/enhanced-img, but for video. You write one tag:

<enhanced:video src="./hero.mp4" autoplay muted loop playsinline />

At build time the clip is encoded into several optimized video files and a poster, and the tag is swapped for a Svelte 5 component that loads them lazily.

I made it because when a page has video, it’s usually the heaviest thing on it, and doing it properly by hand is tedious. You run ffmpeg several times per clip for different sizes and codecs, export a poster, then write the <video> and <source> markup yourself. I wanted that to happen in the build, the way it already does for images.

How it works

• A markup plugin, structured like enhanced-img’s, finds <enhanced:video> tags in .svelte files and rewrites each one into an import of the clip plus the runtime component.
• A loader plugin runs ffmpeg. By default it outputs MP4 (H.264) and WebM (VP9) at 1080p, 720p and 480p, skipping sizes bigger than the source. AV1 and HEVC are opt-in.
• The poster is the video’s first frame, served as a <picture> with AVIF, WebP and JPG versions.
• Encodes are cached on disk by a content hash, so a clip is only re-encoded when the file, the settings, ffmpeg or the plugin version changes.
• By default the component fetches no video until it’s about to scroll into view, pauses it when it leaves, and respects reduced-motion settings. There’s also a click-to-play mode.

I built the plugins, the ffmpeg wrapper with hardware-encoder detection and a software fallback, the quality presets, background encoding in dev so pages aren’t blocked, and the runtime component, pair-programming with Claude on most of it. It’s MIT licensed, and I set up the CI that publishes new versions to npm.