obsidian-auto-embed

Obsidian plugin to help embed links automatically instead of using iframes

Getting Started

Downloading the plugin

TODO

Embedding links

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

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:

• (https://x.com) *
• Reddit *
• Imgur
• CodePen
• Steam
• Spotify *

Warning

Those websites that has * means that it has some limitation. See Current Limitations & Known Bugs for more info

For a list with examples on how the websites look like: Supported Websites List

Custom Options

How to add options:

• In between the square brackets [add options here], add your options.
• If you aren't sure which options are available, refer to the table below

All options:

Option	Description	Example Markdown
noembed	Disables embedding for this link. If possible, try to use [](link) instead. Same syntax, just without '!'	
w:value / width:value	Sets embed's width	
h:value / height:value	Sets embed's height	

Uses CSS Units where applicable.

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 the this format: ![](link)
   • In Live Preview:
     Searches for ![](link) and gets the options and url from it.
2. Gets the url from it, 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. Replaces 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 (If you want other websites, create an issue or message me)
  • Google Maps
  • Google Docs
  • Google Calendar
  • Notion
  • Other websites. Iframely has a list of websites that can be embedded.
• Add tests
• Updated README.md
  • Improve readability. Open to suggestions, especially if something wasn't clear!
  • Add images / gifs to show examples
  • Add installation instructions
• Submit to Obsidian plugin directory?

Current Limitations & Known Bugs

• General
  • Live Preview: It's still experimental which means it might have bugs.
  • Mobile: Not tested yet
• Website specific
  • Reddit: Incorrect resizing of Reddit embeds when there are multiple Reddit embeds that appear in the same view.
    Temporary fix methods:
    • Space out the reddit embeds such that there isn't multiple embeds in your view
    • Manually set the height by using options: ![h:240px](reddit link)
  • Spotify: Only able to play 30 seconds of a song. Spotify only allows when the user is logged in the browser, which is not possible in Obsidian.
  • Twitter & YouTube: Since Obsidian supports it, I won't interfere with it. However, it means that options isn't supported. I might be able to replace Obsidian's embeds with mine, but it'll only work in Live Preview, but not Reading Mode. This makes an inconsistent user experience but if you want this feature, contact me.
  • Twitter / X: Obsidian supports https://twitter.com but not https://x.com. This plugin just helps embedding 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: ![]()

Contact Me

I've just started Obsidian and this is my first plugin.
If you have any questions, feature requests or issues feel free to create a issue or contact me!

Email - gnoxnahte@gmail.com
Discord DM - https://discordapp.com/users/222261096738717696

If this plugin helped you and want to support it's development, consider supporting me at Ko-fi