6.3k stars · Apache-2.0 · v0.3.4 (2025-11-10)
Renders a YouTube embed as a thumbnail until someone presses play — roughly an order of magnitude less initial page weight.
▶Repo detailsthe review · specs · pros & cons · install
What it is
A tiny custom element that replaces the standard YouTube iframe. Instead of loading YouTube's player and its several hundred kilobytes of JavaScript on page load, it renders the thumbnail with a play button; the real player is only fetched when a visitor actually clicks. The measured difference is roughly an order of magnitude in initial weight.
Why it matters
Your marketing depends on video, so your landing page and your blog posts will have embeds on them — and a standard embed is usually the single largest cost on the page, worse than every image combined. Edition 6 put imgproxy in front of you for image weight and made the Core Web Vitals argument; this is the same argument for the heavier offender, and it is a smaller job. Swap <iframe> for <lite-youtube> and the page that ranks for "how do I summarise a long chat" stops being slow because of the demo video sitting on it. There is a privacy angle worth a sentence too: no YouTube script runs until the visitor chooses to play, which is a defensible position for a product whose pitch is that your text stays on your server.
- A drop-in swap: one script, one CSS file, one changed tag. Genuinely an hour including testing
- Apache-2.0, no build step, no framework — works identically in Astro, Starlight and your React app
- Written and maintained by a Chrome performance engineer, which is the right pedigree for a page-weight fix
- The last release is November 2025 — around ten months. It is a small, finished tool rather than an abandoned one, but check for a newer tag before you install
- The thumbnail comes from YouTube's own image URLs, so a poor auto-generated thumbnail needs overriding by hand with a poster image
- YouTube's watch-time analytics see a slightly different signal from an embed loaded on click; not a problem, but do not compare the numbers to last month's
Swap <iframe> for <lite-youtube> and the page that ranks for "how do I summarise a long chat" stops being slow because of the demo video sitting on it.
npm install lite-youtube-embed <lite-youtube videoid="VIDEO_ID" playlabel="Play: Grasppy in 90 seconds"></lite-youtube>