27

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

 4 years ago
source link: https://github.com/paulirish/lite-youtube-embed
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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. 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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK