obsidian-plugin/gnoxnahte_obsidian-auto-embed
1
0
Fork 0
mirror of https://github.com/gnoxnahte/obsidian-auto-embed.git synced 2026-07-22 09:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
gnoxnahte_obsidian-auto-embed/README.md
GnoxNahte 85bd92a2f2 Update README.md
2024-03-21 22:36:32 +08:00

5.4 KiB
Raw Blame History

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

GIF showing example on how to embed links

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

Features

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

Supported websites:

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 ![noembed](https://example.com)
w:value / width:value Sets embed's width Uses CSS Units ![w:100%](https://example.com)
h:value / height:value Sets embed's height. Uses CSS Units ![h:500px](https://example.com)

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 `![](link)` format
    In Live Preview Searches for the `!` character that appears in `![](link)` 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