obsidian-auto-embed

Obsidian plugin to help embed links automatically instead of using iframes

Getting Started

Assuming you have Obsidian downloaded, Download the plugin: https://obsidian.md/plugins?id=auto-embed

Embedding links

1. Paste a link
2. Select "Create Embed"
3. (Optional) Add Options
4. Done! Wait for the embed to load

https://github.com/user-attachments/assets/def3599a-bac6-4517-83f3-96fc6ba5a815

Uses the same syntax as Obsidian - Embed Web pages. Syntax: ![options](link)

Features

Auto embeds websites like: Imgur, CodePen, Steam. Full list of supported websites

Supported websites:

Social Media:

• X *
• Reddit
• TikTok

Sound/Music:

• Spotify *
• SoundCloud

Others:

• CodePen
• Steam
• Imgur
• Notion *

[!WARNING] Websites with * means that it has some sort of limitation/note. See Current Limitations & Known Bugs for more info

For unsupported websites, the plugin will embed the whole website and not modify it.

For a list with examples of how the websites look like Supported Websites List.

Custom Options

How to add options:

• In between the square brackets - ![add options here](https://example.com)
• If you aren't sure which options are available, refer to the table below

All options:

Uses CSS Units where applicable.

Custom styles

TODO: Add a table that lists all the CSS classes users can override.

How the plugin works

A brief overview with some steps on how the plugin works. Not required to use the plugin, just for those who are curious. Certain steps vary depending on whether you're in Reading View or Live Preview. However, the plugin doesn't have any impact when you're in source mode.

1. Search where in the document the syntax is found.
   • In Reading View:
     Searches for the <img> tag that's generated by Obsidian when you use this format: ![](link)
   • In Live Preview:
     Searches for ![](link) and gets the options and URL from it.
2. Get the URL from it, and convert it to the embed equivalent. Usually adds /embed/ somewhere in the url. Results in the same website but focused only on the content. No headers, footer, etc
   • Example:
     https://codepen.io/jh3y/pen/LYNZwGm converts to https://codepen.io/jh3y/embed/LYNZwGm?default-tab=result&editable=true
3. Replace those tags with <iframe> and apply options (width, height, dark mode, etc)
4. Some websites like Twitter, Reddit or Imgur, will send a resize message. The plugin uses the info to resize the embed.

Roadmap

• [ ] Add support for other websites
  • [ ] Google Maps
  • [ ] Google Calendar
  • [ ] Mastodon. Since there isn't a good way to check if the url is from Mastodon, have a setting that lets users input their own servers to be embedded as Mastodon.
  • [ ] Other websites. Iframely has a list of websites that can be embedded.
• [ ] Add preview websites when hovering a link and holding Ctrl for websites that aren't embedded using the syntax.
• [ ] Add tests
• [ ] Updated README.md
  • [ ] Improve readability. Open to suggestions, especially if something isn't clear.
  • [ ] Add images/gifs to show examples
  • [ ] Add installation instructions

[!TIP] Submit any features you want using GitHub Issues or Google Forms (if u aren't comfortable with GitHub) Even if the feature is already listed, just submit it so I'll try to prioritise it.

Current Limitations & Known Bugs

• General
  • Live Preview:
    • The cursor location doesn't match with Obsidian's Embed Web pages. Still trying to fix it.
    • Rarely happens but sometimes it glitches out and doesn't let you edit. When it does that, either restart the app or switch to Source mode.
• Website specific
  • Spotify: Only able to play 30 seconds of a song. Spotify only allows when the user is logged in to the browser, which isn't possible in Obsidian.
  • Reddit: Share link (link with /s/ instead of /comments/ in the URL) isn't supported. As a workaround, open the link in a browser and Reddit should redirect it to the /comments/ link which is supported.
  • Notion: The notion note needs to be a published website. Also, the plugin isn't doing anything special for Notion. Unlike other websites, it's just using the raw link as an iframe.
  • Twitter & YouTube: Since Obsidian supports it, I won't interfere with it. However, it means options isn't supported. I might be able to replace Obsidian's embeds with mine, but options will only work in Live Preview, but not Reading Mode. This makes an inconsistent user experience but if you want this feature, contact me / create a pull request.
  • Twitter / X: Obsidian supports https://twitter.com but not https://x.com. This plugin just helps to embed X. If you replace Twitter with x, or vice versa, it'll lead to the same tweet/post. Usually when copying from the mobile app, it's X. When copying from the web, it's Twitter.

Please send any issues you found!

Frequently asked questions

The embed isn't appearing

1. Have you enabled the plugin?
2. Are you following this syntax? ![](link)
   For example: ![](https://example.com)
3. If it still doesn't work, create a post in Discussions so I can help you

Contact Me

I've just started Obsidian and this is my first plugin.
If you have any questions, feature requests, bugs or anything related to the plugin, feel free to create an issue or submit a Google Form.

Alternatively, you can email me too.

If this plugin helped you and want to support its development, please consider supporting me at Ko-fi

Credits

• Inspired by Sam Warnick's Simple Embed. It was archived so I made my own plugin. Changed a lot of things from it though.