Rach Smith's Notes & Nuggets

Using lighter YouTube embeds on the site

note : meta Added May 3, 2024

In [[DJs that wear things over their head|yesterday's note]] I added a bunch of YouTube embeds. I remembered that I've been meaning to use a better alternative for a while now. I didn't have time for that yesterday so I swapped them out today.

In terms of performance, YouTube embeds are pretty woefull, downloading way too many resources before you've even elected to watch the video. I decided to replace my embeds with Paul Irish's <lite-youtube> custom element.

It wasn't too much effort:

  • Get the JS and CSS resources from the repo.
  • Modified my copy of the [[Automating the process for moving notes from my Obsidian vault to my Astro site|Obsidian vault sync]] script to detect the presence of any <lite-youtube> elements. If so it adds includeYTResources: true to the frontmatter of the note .md file in Astro.
  • Used the includeYTResources property on the note content to add the lite-youtube JS and CSS to any pages containing the embed.

Here's the commit where I add the changes to the Astro site.

This has been post no. 3 for #WeblogPoMo2024 and it is what I was interested in today.

Thanks for reading! If you'd like to share your thoughts you can reply by email or hit me up on Mastodon or Bluesky.