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. Syntax: ![options](link)

Features

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

Supported websites:

• (https://x.com) (Obsidian only supports twitter.com but not x.com)
• Reddit (Has some resizing bugs)
• Imgur
• CodePen
• Steam
• Spotify (Has a 30 second preview limit. Spotify only allows full songs when logged in)

Warning

This plugin won't change Twitter and YouTube links since Obsidian handles those. Which means that options don't work.

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 on this iframe	
w:value / width:value	Sets embed's width Uses CSS Units	
h:value / height:value	Sets embed's height. Uses CSS Units	

How the plugin works

A brief overview of how the plugin works. Requires basic knowedge of HTML and Obsidian.

1. In Reading View

   Searches for `` tags that's generated by Obsidian when you use the `` format
   In Live Preview

   Searches for the `!` character that appears in `` and gets the [options](#custom-options) and the url from the next characters.

   In Live Preview:
   Searches for the ! character that appears in ![](link) and gets the options and the url from the next characters.

2. Gets the url from it, convert it to the embed equivalent. Usually the same website just focusing on the content. Don't have the header, footer, etc

   Example:

   "https://codepen.io/jh3y/pen/LYNZwGm" -> "https://codepen.io/jh3y/embed/LYNZwGm?default-tab=result&editable=true"

3. Replaces those tags with <iframe> and apply options.

4. Some websites like twitter, reddit or imgur, they'll send a resize message. So resize the embed using that info

Roadmap

• Add support for other websites (Suggest some examples?)
  • Google Maps
  • Google Docs
  • Google Calendar
  • Notion
  • Other websites. Iframely has a list of websites that are embeddable.
• Add tests
• Updated README.md
  • Add images / gifs to show examples
  • Add installation instructions
• Submit to Obsidian plugin directory?

Current Limitations & Known Bugs

• Reddit: Incorrect resizing of Reddit embeds when there are multiple Reddit embeds that appear in the same page.
• 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.
• Live Preview: It's still experimental which means it might have bugs. Please send any issues!
• Mobile: Not tested yet

Frequently asked questions

The embed isn't appearing

1. Have you enabled the plugin?
2. Are you following this syntax? ![](link)
   For example: ![]()

Support

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 - https://discordapp.com/users/222261096738717696

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