Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

Lite YouTube Embed NPM lite-youtube-embed package

Renders faster than a sneeze.

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.



Normal <iframe> YouTube embed lite-youtube
Screen Shot 2019-11-03 at 5 23 50 PM Screen Shot 2019-11-03 at 5 21 05 PM Screen Shot 2019-11-03 at 5 19 35 PM Screen Shot 2019-11-03 at 5 23 27 PM Screen Shot 2019-11-03 at 5 20 55 PM Screen Shot 2019-11-03 at 5 20 16 PM

Basic usage

Use the lite-youtube-embed npm package or download from this repo and use src/.

To use the custom element you will need to:

  1. Include the stylesheet within your application
  2. Include the script as well
  3. Use the lite-youtube tag via HTML or JS.
  4. Be happy that you're providing a better user experience to your visitors
<!-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

<!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

Privacy note: lite-youtube uses instead of in order to be more privacy friendly for end users.

Custom Player Parameters

YouTube supports a variety of player parameters to control the iframe's behavior and appearance. These may be applied by using the params attribute.

<!-- Example to show a video player without controls, starting at 10s in, ending at 20s,
     with modest branding *and* enabling the JS API -->
<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>

Note that lite-youtube uses autoplay=1 by default.


Pro-usage: load w/ JS deferred (aka progressive enhancement)

Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('');">
  <a href="" class="lty-playbtn" title="Play Video">
    <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>


Custom poster image

If you want to provide a custom poster image, just set it as the background-image, and lite-yt will not overwrite it:

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('');"></lite-youtube>


Other fast YouTube embeds

Other third-party facades