Design and interface · Edition No. 7 · 1 Sep 2026

paulirish/lite-youtube-embed

A small custom element that replaces a YouTube iframe with a thumbnail until it is clicked.

← Design and interfaceRead the whole edition →
A lighter embed for a video. Shows a picture until somebody clicks.

6.3k stars · Apache-2.0 · v0.3.4 (2025-11-10) · Track this in Rising ↗

Renders a YouTube embed as a thumbnail until someone presses play — roughly an order of magnitude less initial page weight.

Verified27 Oct 2026

Radar check

What we found when we opened it. Every bar is one fact, with its date.

Alive30

Last code pushed 10 Nov 2025, 11 months before this check.

Releases50

Latest release v0.3.4 on 10 Nov 2025.

Maturity90

Public since November 2019, a little over 6 years.

Adoption76

6,352 stars and 299 forks.

Activity0

0 commits and 1 new issues in the last 90 days.

Community60

26 contributors. No pull requests merged in 90 days; changes go in directly.

Security40

No security policy file says how to report a problem. No published security advisories.

Licence Apache-2.0 | [demo page](https://pauliri: permissive: use it for anything, keep the noticeSetup effort 1 of 5Payoff 3 of 5
How the bars are scored
  • Alive. Days since the last code push: a week or less 100, a month 90, three months 70, six months 50, a year 30, eighteen months 15, older 0.
  • Releases. Age of the latest GitHub release, on a similar scale; no bar when the project publishes no releases.
  • Maturity. Age of the project: eight years 100, five 90, three 70, two 55, one 40, six months 25, younger 10.
  • Adoption. Stars on a log scale: 100,000 stars is 100, 10,000 is 80, 1,000 is 60, 100 is 40.
  • Activity. Commits in the last 90 days: 300 or more 100, 100 85, 30 65, 10 45, any 25.
  • Community. People who have contributed: 100 or more 100, 30 80, 10 60, 5 40, 2 25, one 10.
  • Security. A published security policy 80, none 40; published advisories are listed, not scored.

Checked by Repo Radar on 27 Oct 2026 from the repository on GitHub. Covered in Edition 7.

▶Repo detailsthe review · specs · pros & cons · install

What it does

You include one JavaScript file and one CSS file, then replace the <iframe> tag with a <lite-youtube> tag carrying the video id. The element renders the video's thumbnail with a play button over it. When a visitor clicks, the real player is inserted and starts playing. The measured difference in what the page loads first is roughly a factor of ten. Optional attributes cover the accessible play label, a title, player parameters, and a custom poster image set through CSS, and there is an option that loads the player interface so the player can be driven from code. The embed uses the youtube-nocookie.com address. What it does not do is work for other video services, and it is not a player: everything after the click is YouTube's own code.

Why it matters

Who it suits. Anyone with videos embedded on pages where loading speed matters: a landing page, a documentation page, a blog post that ranks in search. It suits a static site best of all, because there is no build step and nothing to configure. It is also a reasonable answer for anyone who would rather no third-party script ran before a visitor asked for it. Skip it if the video is the whole point of the page and everyone who arrives presses play, because then the player is needed anyway.

Verdict. An hour including testing, and the gain is on the measurements search engines use. The honest caution is the project's pace: the last release, v0.3.4, is 10 November 2025 and the last code change the same day, which is eleven months before this refresh. It is small and finished rather than abandoned — there is no deprecation notice and the alternatives are listed in its own README — but nothing new is coming, so treat it as a file that has stopped moving. Two smaller things. The thumbnail comes from YouTube's own image addresses, so a poor automatic thumbnail has to be overridden by hand. And the watch-time figures reported by an embed loaded on click look slightly different, so do not compare them with last month's.

Stars6.3k
LicenceApache-2.0
Latestv0.3.4 (2025-11-10)checked 7 Sep 2026
Written inHTML
Summary (Key Points)from the README
Key features
  • Fast rendering: The README claims the element renders approximately 224× faster than the normal YouTube embed.
  • Privacy-friendly host: It uses youtube-nocookie.com instead of youtube.com.
  • Progressive enhancement: You can ship plain HTML and let a deferred, asynchronously loaded script upgrade it.
  • Custom poster image: Set your own image as the background-image and lite-yt will not overwrite it.
  • Iframe Player API access: The js-api param enables use of the YouTube IFrame Player API.
  • Visible title: The title attribute displays a title before the full embed loads.
  • Custom player parameters: The params attribute passes YouTube player options to the iframe.
  • Flexible use: The lite-youtube tag can be used via HTML or JavaScript.
Ways to install
Platform or methodWhat it needsEffort
npm package (lite-youtube-embed)Install the package with npm, then include its stylesheet and scriptLow
Download from this repoCopy the src/ files into your project, then include its stylesheet and scriptLow
Important
  • Required includes: You must include both the stylesheet and the script for the custom element to work.
  • Autoplay default: lite-youtube uses autoplay=1 by default, so the video starts once loaded unless you change the params.
  • Performance figure: The 224× speed claim comes from the README itself; the README offers a side-by-side comparison demo to check it.
  • Poster images: Use poster-image-availability.html to see which poster images you can use.

Written by an AI model from the project’s README; not part of the review, and it can be wrong.

Setup effort
1 / 5
Payoff
3 / 5
Good
  • One script, one stylesheet, one changed tag, and no build step or framework.
  • Apache-2.0, with no dependencies at all in the published package.
  • Written by a browser performance engineer, which is the right background for a page-weight fix.
Watch for
  • No release or code change since 10 November 2025, eleven months before this refresh.
  • The thumbnail comes from YouTube's automatic images, so a bad one needs a poster set by hand.
  • Autoplay after the click is on by default, which is not always what a page wants.
Replaces

Swap &lt;iframe&gt; for &lt;lite-youtube&gt; and the page that ranks for "how do I summarise a long chat" stops being slow because of the demo video sitting on it.

Install
npm install lite-youtube-embed
Screenshots
paulirish/lite-youtube-embed: GitHub preview cardpaulirish/lite-youtube-embed: Screenshot 1paulirish/lite-youtube-embed: Screenshot 2paulirish/lite-youtube-embed: Screenshot 3paulirish/lite-youtube-embed: Screenshot 4

On Stack Radar: Design & Creative › UI/UX Design › Interface Design.

Get the next edition in your inbox

A dozen repositories, opened and checked. The licence read, the last release dated, and the ones that did not make it named with the reason. It is the half most lists leave out.

No tracking pixels. One click to leave. The archive stays free either way.

We use your address to send the edition and nothing else. Confirm by email, leave in one click. How we handle it.