Embedding consent gate and oEmbed

By
dracoblueMay 12, 2026
Subscribe

My next #notai generated post is about another day of developing the kiesel app. This one is about lazy loading embeds (like YouTube videos) only if the user approves and using oEmbed endpoints as cheap api endpoints.

Consent Gate

The atproto protocol gives me a nice title and thumbnail and some text for everything linked. No third party involved - that's nice. I don't like to always leave the app for watching a video or audio content referenced, so I wanted to make this opt-in for those I trust and otherwise be able to ignore a provider I don't trust.

But e.g. YouTube urls are not only youtube.com, but also youtu.be and others - so there is a mapping list of domains to a specific third party provider.

If the embedding is possible, it will launch a webview (the TOS-acceptable way to include most of the third party contents) and show it to the user. She can then interact with the content.

An example provider looks like this:

{
    id: "youtube",
    name: "YouTube",
    domains: ["youtube.com", "www.youtube.com", "youtu.be", "m.youtube.com", "music.youtube.com"],
    oembedEndpoint: "https://www.youtube.com/oembed",
    playerType: "webview",
    mediaType: "mixed",
    autoplayAllowed: true,
    autoplayDefault: false,
    requiresMiddleware: false,
    profileAccess: "api",
    consentRequired: true,
}

oEmbed check

The providers offer apis to check for content, others don't do this at all or only for your own content. My favourite (not rate limited?) endpoint is the provided oEmbed endpoint (used for embedding - that's what we do - awesome!) to check if a content exists or not. So my check is easier and does not make us load a full webview of nothing useful (in worst case):

export async function fetchOEmbed(
  endpoint: string,
  url: string
): Promise<OEmbedResponse> {
  increment("oembedRequests");
  const oembedUrl = `${endpoint}?url=${encodeURIComponent(url)}&format=json`;
  const response = await fetch(oembedUrl);

  if (!response.ok) {
    increment("oembedErrors");
    throw new Error(`oEmbed request failed: ${response.status}`);
  }

  return response.json();
}

So if it returns a 200 OK - it's there (at least for most providers) and if it is 404 (private or deleted) or even other status code (geo protected) - the magic external embedding logic of the oEmbed makes validating the existence of the content easy.

And for data privacy reasons: The spotify/YouTube servers don't know anything (even not your IP) about you before you accept. And for validating the video existence, since oEmbed is used it is done client side and no server of kiesel needs to run anything for you (hence it also does not know anything about you). And if this all went fine: it embeds the expensive webview.

See you in the next dev day post!

kiesel
1Subscribe