mirror of
https://github.com/gnoxnahte/obsidian-auto-embed.git
synced 2026-07-22 09:50:24 +00:00
134 lines
8.7 KiB
Markdown
134 lines
8.7 KiB
Markdown
[](../../releases)
|
|
[](../../commits/main/)
|
|
[](../../issues)
|
|
[](../../issues?q=is%3Aissue+is%3Aclosed)
|
|
[](/LICENSE)
|
|
[](https://obsidian.md/plugins?id=auto-embed)
|
|
|
|
# obsidian-auto-embed
|
|
[Obsidian](https://obsidian.md/) plugin to help embed links automatically instead of using iframes
|
|
|
|
## Getting Started
|
|
Assuming you have [Obsidian](https://obsidian.md/) 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](#custom-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](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages). Syntax: ``
|
|
|
|
## Features
|
|
Auto embeds websites like: [Imgur](https://imgur.com/), [CodePen](https://codepen.io/), [Steam](https://store.steampowered.com/). Full list of [supported websites](#supported-websites)
|
|
|
|
### Supported websites:
|
|
#### Social Media:
|
|
- [X](https://x.com) *
|
|
- [Reddit](https://www.reddit.com/)
|
|
- [TikTok](https://www.tiktok.com/)
|
|
|
|
#### Sound/Music:
|
|
- [Spotify](https://open.spotify.com/) *
|
|
- [SoundCloud](https://soundcloud.com/)
|
|
|
|
#### Others:
|
|
- [CodePen](https://codepen.io/)
|
|
- [Steam](https://store.steampowered.com/)
|
|
- [Imgur](https://imgur.com/)
|
|
- [Notion](https://www.notion.so/) *
|
|
|
|
> [!WARNING]
|
|
> Websites with `*` means that it has some sort of limitation/note. See [Current Limitations & Known Bugs](#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](SupportedWebsiteList.md).
|
|
|
|
## Custom Options
|
|
How to add options:
|
|
- In between the square brackets - ``
|
|
- 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 using `[](link)` instead. Same syntax, just without '!'|``
|
|
|w:`value` / width:`value`|Sets embed's width|``
|
|
|h:`value` / height:`value`|Sets embed's height |``
|
|
<!---
|
|
TODO: Dark mode
|
|
|
|
TODO: Find out how to format size. the separator between width and height is "x". Conflicts with "px"
|
|
|size: `value`x`value`|Sets both embed's width and height. Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)|`[size:100%x300px](example.com)`
|
|
--->
|
|
|
|
Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths) 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**: <br>
|
|
Searches for the `<img>` tag that's generated by Obsidian when you use this format: ``
|
|
- In **Live Preview**: <br>
|
|
Searches for `` and gets the [options](#custom-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: <br>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](https://iframely.com/domains) 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](https://github.com/GnoxNahte/obsidian-auto-embed/issues) or [Google Forms](https://forms.gle/xtuv4FVCKZ2tg9zK9) (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](https://help.obsidian.md/Editing+and+formatting/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](https://help.obsidian.md/Editing+and+formatting/Edit+and+preview+Markdown#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](https://www.notion.so/help/public-pages-and-web-publishing). 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](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages), I won't interfere with it. However, it means [options](#custom-options) isn't supported. I might be able to replace Obsidian's embeds with mine, but [options](#custom-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](https://github.com/GnoxNahte/obsidian-auto-embed/issues) you found!
|
|
|
|
## Frequently asked questions
|
|
### The embed isn't appearing
|
|
1. Have you [enabled the plugin](https://help.obsidian.md/Extending+Obsidian/Community+plugins#Enable+a+community+plugin)?
|
|
2. Are you following this syntax? ``<br>
|
|
For example: ``
|
|
3. If it still doesn't work, [create a post in Discussions](https://github.com/GnoxNahte/obsidian-auto-embed/discussions/categories/general) so I can help you
|
|
|
|
## Contact Me
|
|
I've just started Obsidian and this is my first plugin.<br>
|
|
If you have any questions, feature requests, bugs or anything related to the plugin, feel free to [create an issue](https://github.com/GnoxNahte/obsidian-auto-embed/issues/new) or [submit a Google Form](https://forms.gle/xtuv4FVCKZ2tg9zK9).
|
|
|
|
Alternatively, you can [email](mailto:gnoxnahte.dev@gmail.com) me too.
|
|
|
|
If this plugin helped you and want to support its development, please consider supporting me at [Ko-fi](https://ko-fi.com/gnoxnahtedev)
|
|
|
|
## Credits
|
|
- Inspired by Sam Warnick's [Simple Embed](https://github.com/samwarnick/obsidian-simple-embeds). It was archived so I made my own plugin. Changed a lot of things from it though.
|