Lite YouTube Embed

A faster youtube embed.

Video
paulirish/lite-youtube-embedpaulirish.github.io/lite-youtube-embed/lite-youtube-embed

README

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.

Demo: https://paulirish.github.io/lite-youtube-embed/

Comparison


Normal`lite-youtube`
|---|---|
![Screen![Screen

Basic usage


Use the [lite-youtube-embed npm package](https://www.npmjs.com/package/lite-youtube-embed) or download from this repo and use src/.

To use the custom element you will need to:

1. Include the stylesheet within your application
1. Include the script as well
1. Use the lite-youtube tag via HTML or JS.
1. Be happy that you're providing a better user experience to your visitors

  1. ```html
  2. !-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
  3. <link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />
  4. <script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>
  5. !-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
  6. <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
  7. ```



Privacy note: lite-youtube uses youtube-nocookie.com instead of youtube.com 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.

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

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

Demo: https://paulirish.github.io/lite-youtube-embed/variants/params.html

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.

  1. ```html
  2. <lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
  3.   <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
  4.     <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
  5.   </a>
  6. </lite-youtube>
  7. ```

Demo: https://paulirish.github.io/lite-youtube-embed/variants/pe.html

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:
  1. ```html
  2. <lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');"></lite-youtube>
  3. ```

Demo: https://paulirish.github.io/lite-youtube-embed/variants/custom-poster-image.html

Other fast YouTube embeds


<lite-youtube> using shadow DOM: [justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) :+1:
React port 1: [ibrahimcesar/react-lite-youtube-embed](https://github.com/ibrahimcesar/react-lite-youtube-embed)
React port 2: [kylemocode/react-lite-yt-embed](https://github.com/kylemocode/react-lite-yt-embed)
Vue port: [andrewvasilchuk/vue-lazy-youtube-video](https://github.com/andrewvasilchuk/vue-lazy-youtube-video)

Other third-party facades


Lite Vimeo Embed: [luwes/lite-vimeo-embed](https://github.com/luwes/lite-vimeo-embed)
<lite-vimeo>: [slightlyoff/lite-vimeo](https://github.com/slightlyoff/lite-vimeo)
React Live Chat Loader (Intercom, Help Scout, Drift, Facebook Messenger): [calibreapp/react-live-chat-loader](https://github.com/calibreapp/react-live-chat-loader)
Intercom chat facade: [danielbachhuber/intercom-facade/](https://github.com/danielbachhuber/intercom-facade/)