Skip to content
JavaScript HTML CSS
Branch: master
Clone or download

readme.md

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.

Comparison

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

To use the custom embed you will need to:

  1. Include the stylesheet within your application
  2. Include the script as well
  3. Use the element lite-youtube markup and scripting
  4. 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>

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

Pro-usage

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

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
	<div class="lty-playbtn"></div>
</lite-youtube>

More coming soon.

You can’t perform that action at this time.