Using lighter YouTube embeds on the site

In 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 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.