paulirish/lite-youtube-embed: A faster youtube embed.

Lite YouTube Embed

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 224X faster.


Normal <iframe> YouTube embed lite-youtube

Basic usage

To use the custom embed you will need to:

  1. Include the stylesheet within your application
  2. Include the script as well
  3. Define your custom element name
  4. Use the element with your defined name in markup and scripting
  5. Be happy that you're providing a better user experience to your visitors
<!-- Include the stylesheet, this could be direct from the package or bundled -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<!-- Include the custom element script -->
<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

<!-- Define your desired name for the element -->
    customElements.define('lite-youtube', LiteYTEmbed);

<!-- Use the element. You may define uses before the scripts are parsed and executed. -->
<lite-youtube videoid="ogfYd705cRs"></lite-youtube>


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

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

More coming soon.