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.

Comparison

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 -->
<script>
    customElements.define('lite-youtube', LiteYTEmbed);
</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.

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章