YouTube Embed Plugin Note

Published by Jordan March 03, 2025

Last changed 7 months ago

views

name	YouTube Embed Plugin
icon	smart_display
description	Embed a YouTube video inline in note content
instructions	Type `{youtube` or `/youtube` in note content and select this plugin: open_in_new Paste the URL of a YouTube video: open_in_new and you'll have an embedded YouTube video: open_in_new This plugin can additionally enable embedded YouTube videos in notes you publish. To do so, include an embedded YouTube video created by this plugin in a public note, then publish the note that is your copy of this plugin.

(() => ({
  async insertText(app) {
    const url = await app.prompt("URL of YouTube video to embed?", { inputs: [ { type: "string" } ] });
    if (!url) return null;
 
    const match = url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
    if (match) {
      const videoId = match[1];
 
      app.context.replaceSelection(
        `<object data="plugin://${ app.context.pluginUUID }?${ videoId }" data-aspect-ratio="1.77" />`
      );
    } else {
      await app.alert("Invalid YouTube URL");
    }
 
    return null;
  },
 
  renderEmbed(app, videoId) {
    return `
      <div style="display: flex; justify-content: center;">
        <iframe
          src="https://www.youtube.com/embed/${ videoId }"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          style="aspect-ratio: 16/9; width: 100%;"
        ></iframe>
      </div>
    `;
  },
}))()