Shortcuts
🌱 A Shortcut for lite-youtube-embed
YouTube embeds take up way too much on a site - so luckily someone has made 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 224Ă— faster.
First you have to include some CSS and JS on your site. 1 And then when you want to embed a video, you could just add this piece to your post/page:
<lite-youtube videoid="CItvhGl__Mk" playlabel="Play: Beatenberg - Wheelbarrow (Official Music Video)"></lite-youtube>
This will embed the video, but over 200x faster - nice!
However, you have to manually add the videoid and the video title.
And they’ve also made a variant named “Pro-usage: load w/ JS deferred (aka progressive enhancement)”, which I think is even more optimised. But then you have to add all of this:
<lite-youtube videoid="CItvhGl__Mk" params="controls=0&rel=0&enablejsapi=1" style="background-image: url('https://i.ytimg.com/vi/CItvhGl__Mk/sddefault.jpg');">
<a href="https://www.youtube.com/watch?v=CItvhGl__Mk" class="lty-playbtn" title="Play Beatenberg - Wheelbarrow (Official Music Video)">
<span class="lyt-visually-hidden">Play Video: Beatenberg - Wheelbarrow (Official Music Video)</span>
</a>
</lite-youtube>