Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
Normal <iframe> YouTube embed |
lite-youtube |
---|---|
To use the custom embed you will need to:
- Include the stylesheet within your application
- Include the script as well
- Use the element
lite-youtube
markup and scripting - 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>
Note that the embed will be using youtube-nocookie.com instead of youtube.com in order to be more privacy friendly for end users.
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.
- Youtube:
justinribeiro/lite-youtube
- Shadow-DOM-using port of paulirish/lite-youtube-embed - Vimeo:
luwes/lite-vimeo-embed
- Vimeo:
slightlyoff/lite-vimeo
- Intercom, Help Scout, Drift, & Facebook Messenger:
calibreapp/react-live-chat-loader