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>
That’s a lot of manual work for each video!
  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. 2

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>
And then it’s nice to swap “Video” with the title.

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>~
I'm not pro enough to actually make this last type of embed work as intended - but I think the shortcut itself should be correct!

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)

  1. I won’t go into this. Check the link above. ↩︎

  2. Catering to different link types are a bit complicated… When making embeds, timestamps are provided in seconds only, and I think youtu.be links always provide this as well. However, sometimes I see timestamps with hours, minutes and seconds! However, since it seems that you mostly get youtu.be links when sharing with timestamps, I’ve chosen to preserve those timestamps and add them to the embed, while just stripping away the others. It’s probably possible to convert the timestamp types, but I didn’t bother. ↩︎