Support high performance YouTube and Twitter embeds

[Swizec]

Hi,

YouTube and Twitter embeds hurt Lighthouse scores. Both load a bunch of unused JavaScript and create heavy iframe embeds.

I've built a custom transformer for YouTube that uses the lite-youtube facade embed (as recommended by Lighthouse). It uses a web component to render a preview image that turns into a full embed with user interaction.

I've also got a custom transformer that creates static Twitter embeds without client-side JavaScript. Uses the Twitter API to recreate tweets using static HTML and CSS.

You can see both in action here: https://serverlesshandbook.dev

The offer

Would contributing these to the core gatsby-remark-embedder plugin be desirable?

I think lite-youtube should be the default way this plugin embeds youtube.

Static Twitter I'm less sure of, but would love to find a way we can make it work.

If you think this is a good idea, I can make PRs :)

Cheers,
~Swizec

[bartveneman]

We could take it a step further and use https://swyxkit.netlify.app/faster-youtube-embeds instead, to avoid any JS cost.

[bartveneman]

Why do we need this?

I'm using a custom transformer for Youtube videos to render the above <iframe srcdoc="" />. This works excellent during a regular build, but apparently Gatsby's Deferred Static Generation can not cope with with Gatsby Plugins that do not have serializable config (like the shouldTransform and getHTML functions) and it throws a 500 error when visiting that page. (See this reduced test case).

Do you want to include any of the above mentioned alternatives in this library? Which one would you prefer? And would you accept a PR for that?