fhachez / obsidian-convert-url-to-iframe

Plugin for Obsidian.md to convert a selected URL to an iframe.

Obsidian Plugin: Convert a URL (e.g. YouTube) into an iframe (preview)

Transform any URL into a preview.

1. Select an url
2. right click on it (or use the command Convert to Url Preview)
3. Click on Url to Preview/Iframe.

The default hotkey is cmd + alt + i.

Installation

Support for 3rd party plugins is enabled in settings (Obsidian > Settings > Third Party plugin > Safe mode - OFF) To install this plugin, download zip archive from GitHub releases page. Extract the archive into /.obsidian/plugins.

Change log

0.5.0

• Always allow full screen for the iframe. In the future it will be an option
• Enable mobile mode.

0.4.0

• Instead of doing a custom mapping to embed for YouTube, we now rely on the OEmbed standard. Thanks to https://www.npmjs.com/package/oembed-parser
  • This allows to preserve the timestamp on Youtube and to get default size for many websites.
• Add contextual menu (right click on a link)

0.3.0

• Simplify the output when using a recent Obsidian download, by leveraging aspect-ratio css.

0.2.0

• Update: the keybinding from Mode + Shift + I to Alt + I (Issue 4)
• Only output the app name in the console (Issue 3)
• Add a aspect Ratio (defaults to 16:9 aspect ratio). (Kankaristo).
• Make sure the iframe can work without the CSS class. (Kankaristo)
• Fix the bad resizing when using Sliding Panes Plugin (Issue 1) (Kankaristo)
• Better user messages and README.md (Kankaristo)
• Preserve Youtube's timestamp Issue 14
• Allow full screen iframes Issue 8

0.1.0

First release

Thank you

• Sami Kankaristo

obsidian-convert-url-to-iframe's Issues

Does not recognize uncommon top level domain (TLD)

It seems that if ".com", ".org", ".net" etc. is not in the url the plugin will not recognize it as a url.

It did not recognize there was a url selected when I tried to add a note about configuring the 1.1.1.1 DNS and add a iframe link to https://1.1.1.1/dns/. I noticed that if I put .com in the url like: https://1.1.1.1 .com /dns/ it would recognize there was a url. Unfortunately that is not a valid domain. A workaround I am doing is to put the ".com" make the iFrame and then changing it to the correct url after inserting the iframe.

Is it possible to set the recognition to validate based if the selected text contains "http" which would cover 99% of URLs?

For details I am experiencing this on:
2020 M1 MacBook Air running MacOS Ventura 13.4 (22F66)
Convert URL to iframe v0.5.0
Obsidian v1.3.5

YouTube video can not full screen

Context Menu Doesn't Work

This plugin is great! However the right click context menu doesn't work. I've tried disabling the other plugins but still nothing. I'm not sure how to reproduce it on your end though.

can't open localhost

I can't open a URL of the form http://localhost:9394/ so that I can see the status of a local service. I suspect this is a security measure. The message I get says to select a URL but I have a URL selected. Can you change the message to say: "For security, localhost cannot be accessed" or something similar.

Simplifying the output: managing aspect ratio with css

Currently the output is not clean and simple:

<div style="display: block; position: relative; width: 100%; height: 0px; --aspect-ratio:9/16; padding-bottom: calc(var(--aspect-ratio) * 100%);">
  <iframe src="https://www.youtube.com/embed/mSC6GwizOag" allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe>
</div>

It could simply be:

<iframe src="https://www.youtube.com/embed/mSC6GwizOag" allow="fullscreen" style="aspect-ratio:16/9; object-fit:contain; width: 100%;"></iframe>

Can't Change Note Width

https://www.loom.com/share/8307c47a0b99484dbb706e9accb8278e

Mobile support

Does it possible to be available on mobile?

Thanks for you good work!

Background and Text Legibility

Embedded an iframe into my vault and it seems to be picking up my vaults background, thus affecting the legibility of the text on site. Maybe an an option to turn this feature off or an option for dark or light background. I was able to fix my particular issue simply by adjusting the style on the iframe element itself.

It may be not compatible with Obsidian Plugin-Sliding Panes.

If the Obsidian Plugin-Sliding Panes has been install, the width of iframe can not be change.

Remove white border

Please add css property border: none to generated embed-code to remove white border around video-player.

Bad default keybinding (`Ctrl+Shift+I`)

Ctrl+Shift+I is a bad default keybinding, because it's is already used in Obsidian (and in Chrome, and most Electron apps) to open the developer tools (useful for modifying CSS, etc.).

The extension's keybinding can be changed in Obsidian's settings, but the default keybinding probably shouldn't conflict with a base Obsidian keybinding (especially since the developer tools keybinding cannot be changed).

Latest Update Fails to Install

Latest update fails to install from the Obsidian Store, and is unavailable from the Releases page.

I see an unmerged PR, so I assume this was a mistake either in bumping the minor version before it was ready, or of merging the PR and transpiling a release.

Add preview link dynamically in view mode

Hi. Much better when URL automatically converted to iframe when you enable VIewMode like this plugin does:
https://github.com/samwarnick/obsidian-simple-embeds

[Feature Request] Allow conversion with right click context menu

With the codemirror options 4.0 plugin, im now able to see iframes within the editor. is there a way where i can convert urls to iframes by just right clicking my mouse and selecting to convert it

Update

From obsidian, I can only install version 0.1.0

How can i get 0.2.0?

YouTube fullscreen disabled

I love the plug-in and find it super helpful.
But would you please add allowfullscreen tag so I can play YT videos in fullscreen mode?
Thank you so much!

Manually add a timestamp

I don't know if there's a way to manually add a timestamp to an iFrame, if not it could be a really useful implementation! I usually add iFrames as reference for my university note-taking, but most of the times I have the same video reference in different notes and have to remember where is the info I need as reference. If it already exists sorry for bothering. Great work with your plugin and thank you!

Calling Url to Iframe from Templater

I am in the process of building a Templater template for youtube videos. On the top of the note I would love to have the video in an iFrame. So far I have this

# Video
<%* 
let clipboardContent = tp.system.clipboard();
this.app.plugins.plugins['convert-url-to-iframe'].urlToIframe(clipboardContent); 
-%>
## Transcript
<%* app.commands.executeCommandById('ytranscript:paste-transcript') -%>

I get the following error:

plugin:convert-url-to-iframe:6653 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'cmEditor')
    at FormatNotionPlugin.eval (plugin:convert-url-to-iframe:6653:49)
    at Generator.next (<anonymous>)
    at eval (plugin:convert-url-to-iframe:49:61)
    at new Promise (<anonymous>)
    at __async (plugin:convert-url-to-iframe:33:10)
    at FormatNotionPlugin.urlToIframe (plugin:convert-url-to-iframe:6651:12)
    at eval (eval at <anonymous> (plugin:templater-obsidian:1:1), <anonymous>:10:51)
    at eval (plugin:templater-obsidian:3537:35)
    at handleError (plugin:templater-obsidian:3324:14)
    at imports.wbg.__wbg_call_168da88779e35f61 (plugin:templater-obsidian:3536:12)

This is the first time I am trying to directly call a function in a plugin. So maybe that is not a great idea. I could potentially work around this issue by adding a function that takes the URL from the clipboard.

Feature Request: Automatically recognise an URL surrounding a cursor

If there is currently no visual selection, it would be cool if the plugin would automatically assume that the current word is the URL to the preview.
It doesn't need to be too smart about it, but the basic functionality would be nice.

I can also contribute that, but only if you'd be willing to accept a PR with that feature.

Feature Request: Preview in writing mode

Personally, I pretty much never leave the Edit mode, so it would be nice to have the option to display it in that mode, too.

Since it's still just HTML, this should be theoretically easy to do, but hard to do right (from the UX perspective) – at least imho.

I'd suggest:

• Have the feature off by default
• Have the option to either activate it when executing a command or when hovering over it with your cursor
• Have a short-cut to automatically start a video
• Have a short-cut to show it & start the video in one command
• Have a short-cut to minimize it

I can also contribute that, but only if you'd be willing to accept a PR with that feature, but in this case the feature is a bit harder to do, so I can't promise to get to it soon. Also it will require a bit of maintenance to ensure that it will also work with future supported websites.

Keep YouTube timestamp

When converting a YouTube URL into an iframe, the timestamp isn't taken into account and is removed from the URL. For embedded YouTube videos, the timestamp is converted to the ?start= parameter (instead of ?t= – cf. YouTube Documentation).

Don't show iframe preview when the codemirror is not active

I am assuming you are the one added the feature to preview ifram in edit mode. Its good but a little buggy. It shows the preview of iframe even when the codemirror is not active

see the cursor is not in the iframe block? its in a empty block but still showing the iframe

Doesn't extract timestamp from given link

Given link

Result

Output APP's content to the console

When using this plugin, it will output the whole app's content to the console.

match note width

the current command does not work to match the width of the note in its entirety:

<iframe src="https://..." allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe>

)

but, if you remove the div styling part, it works fine.

URL converted to iframe wrongly

this inline string (part of paragraph): https://www.youtube.com/watch?v=Sujxj8uM9gw
was converted into (via right click/URL to preview/iframe, just hitting the OK button in the dialog):

<div style="display: block; position: relative; width: 100%; height: 0px; --aspect-ratio:9/16; padding-bottom: calc(var(--aspect-ratio) * 100%);"><iframe src="<iframe src=&quot;https://www.youtube.com/embed/Sujxj8uM9gw?feature=oembed&quot; height=&quot;113&quot; width=&quot;200&quot;></iframe>" allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe></div>

And FYI, already in the dialogue (one where you set the aspect ratio) there's nothing previewed, just empty frame.

Can this plugin support remembering the webpage position?

Can this plugin support remembering the webpage position? It is quite inconvenient to have to search for the embedded webpage from the beginning every time I open the notes.

Feature Request: Insert from clipboard

It would be nice to have another command to essentially do the same thing, but instead of using the selection using the current clipboard.

I can also contribute that, but only if you'd be willing to accept a PR with that feature.

Consider adopting oembed instead of constructing your own embed markup

Implementing oembed would mean that you can support hundreds of external sites without implementing support for each one.

For instance, for YouTube videos, you can make a request to https://www.youtube.com/oembed?type=json&url=[whatever URL you were given] (e.g. https://www.youtube.com/oembed?type=json&url=https://www.youtube.com/watch?v=dQw4w9WgXcQ).

You'll get some JSON back like this:

{
  "title": "Rick Astley - Never Gonna Give You Up (Official Music Video)",
  "author_name": "Rick Astley",
  "author_url": "https://www.youtube.com/c/RickastleyCoUkOfficial",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
  "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
}

Grab the html attribute from the returned JSON and put that on the page and you're all set. A list of all of the oembed providers can be found here: https://oembed.com/providers.json

Hope this helps!

Just saying bravo!

Found this thanks to @evielync in this post: https://twitter.com/evielync/status/1505327656551981056?s=20&t=XWFPql2yia1v56V0oruHaQ

Love the example you used in the readme! That's all. Take care.

The newest Update is not available

WeChat reading can't log in

There is a login button, which can pop up the QR code, but after scanning the code on WeChat, it is confirmed that it is successful, and the embedded iframe page is not successfully logged in.

Iframe element generated twice?

Hello. When I use your plugin on the URL http://linuxfr.org, here is the resulting HTML:
<div style="display: block; position: relative; width: 100%; height: 0px; --aspect-ratio:3/4; padding-bottom: calc(var(--aspect-ratio) * 100%);"><iframe src="<iframe src=http://linuxfr.org allow=&quot;fullscreen&quot; style=&quot;height:100%;width:100%; aspect-ratio: 16 / 9;&quot;></iframe>" allow="fullscreen" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;"></iframe></div>
Am i the only one with such an invalid result?