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

Links to the shortcuts

1. Lite version - no API
2. Lite version - requires API
3. Pro version - requires API

Now, I’m sure I’m not the first to have automated this process - but here’s the shortcuts I’ve made, that simply does the following:

1. Ask for you to paste a YouTube link.
2. Adds the Progressive enhancement code snippet to your clipboard.

They work with both youtube.com, m.youtube.com and youtu.be links, with or without the ?si= part some links have, and with or without timestamps. ²

Here’s the difference between the three:

Lite version - no API gives you this:

<lite-youtube videoid="CItvhGl__Mk" params="controls=1&rel=0&enablejsapi=0" playlabel="Play: Video"></lite-youtube>

Lite version - requires API gives you this:

<lite-youtube videoid="CItvhGl__Mk" params="controls=1&rel=0&enablejsapi=0" playlabel="Play: Beatenberg - Wheelbarrow (Official Music Video)"></lite-youtube>

So, there only difference here, is that the second version also gets the title of the video.

Pro version - requires API gives you this:

~<lite-youtube videoid="CItvhGl__Mk" params="controls=1&rel=0&enablejsapi=0" style="background-image: url('https://i.ytimg.com/vi/CItvhGl__Mk/sddefault.jpg');"><a href="https://www.youtube.com/watch?v=CItvhGl__Mk&t=1s" 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>~

Personally I’ve edited mine to also wrap the result in ~~, as I need that for Ulysses - and you can of course so something similar if you want.

I hope this can be useful for someone else as well!

Examples

“No API” version:

Regular embed:

Lite embed:

Start at 40 seconds:

With API:

“Pro” version:

OBS: These are the ones that don’t work properly at the moment! But I’ve let them be, so people with more knowledge than me can poke around.

Regular embed:

Lite embed:

Play Video: Beatenberg feat. Msaki - White Shadow (Official Music Video)

Start at 1m 10s:

Play Video: Beatenberg - The Lighthouse of Alexandria (Official Music Video)