fhachez / obsidian-convert-url-to-iframe Goto Github PK
View Code? Open in Web Editor NEWPlugin for Obsidian.md to convert a selected URL to an iframe.
Plugin for Obsidian.md to convert a selected URL to an iframe.
the current command does not work to match the width of the note in its entirety:
but, if you remove the div styling part, it works fine.
Does it possible to be available on mobile?
Thanks for you good work!
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.
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
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).
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
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!
Hi. Much better when URL automatically converted to iframe when you enable VIewMode like this plugin does:
https://github.com/samwarnick/obsidian-simple-embeds
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.
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!
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.
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.
If the Obsidian Plugin-Sliding Panes has been install, the width of iframe can not be change.
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.
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>
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="https://www.youtube.com/embed/Sujxj8uM9gw?feature=oembed" height="113" width="200"></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.
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:
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.
From obsidian, I can only install version 0.1.0
How can i get 0.2.0?
When using this plugin, it will output the whole app's content to the console.
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 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.
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.
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).
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!
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="fullscreen" style="height:100%;width:100%; aspect-ratio: 16 / 9;"></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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.