#1

This is a simple extension to transform URLs such as a youtube link to an iframe, a preview.

For the moment, it works with websites that allow embedding and youtube (the URL is transformed).

More websites could be supported such as Spotify in the future if people are interested!

Plugin: https://github.com/FHachez/obsidian-convert-url-to-iframe
image

6 Likes
Show preview on hover over external link (e.g. to a webpage)
#2

Just installed this and I really like it already. It also incidentally works when I embed my own website and I guess will work with many other websites. Is there or could there possibly be a way in the future to scale a website or other by %? Not sure if I am asking this correctly let me try…

When I embed a website its full size is greater than the page space both in Obsidian and Obsidian Publish I would like it to fully fit the window with out any scroll bars. I think I am asking is it possible to scale an embed up or down so its content is + (120% for example) or - (70%) of the original size. I have no idea if this is possible at all?

apologies in advance for my knowledge-less mind around this stuff

Good plugin by the way

#3

@KaneDodgson Thanks for trying it!

I guess will work with many other websites.

It works with a lot of websites but sadly there isn’t an easy rule to know in advance. You’ve to try it to know.

Each website can decide to allow or not whether we can embedded their website.

For example, youtube allows urls like “https://www.youtube.com/embed/XYZ” but not the normal urls “https://www.youtube.com/watch?v=XYZ”.

Currently, the plugin only do something specific for youtube transforming “https://www.youtube.com/watch?v=XYZ” into “https://www.youtube.com/embed/XYZ”.

When I embed a website its full size is greater than the page space both in Obsidian and Obsidian Publish I would like it to fully fit the window with out any scroll bars.

For the size, you can resize the preview (there is a checkbox to be able to change the width and then you can move the bottom right corner of the preview) but indeed currently it doesn’t look great if you go wider than a normal page or if the page is really wide.

I think there is a CSS solution to resize the content. If there are more people interested, I can add an option to select a “zoom” level.

1 Like
#4

Would be lovely if possible (re zoom level) but either way still a good and useful plugin. As I am working on a project that will have a lot of embeds in it for the public your plugin will save me hours of fiddling around guessing dimensions, It is likely to be the most or one of the most useful plugins for me personaly

1 Like
#5

I’m sure this plugin is going to be useful to me in a number of situations. I currently use Obsidian’s Templates plugin for pasting pre-made iframes for YouTube videos with set dimensions. I’m wondering if it’s possible to use a preset of some sort for the iframe’s dimensions instead of having to change it each time when needed. Thanks!

Also, having a hard time manually changing the iframe’s size in the preview. Every time I drag the corner it selects part of the video/website instead of resizing it. Am I missing something?

1 Like
#6

Top, I’ll have a look for the scaling but after a small exploration, it doesn’t look easy.

If a CSS wizard has some tips I’m all ears. I’ve tried some solutions found online.
The difficulty is that we don’t have access to the content of the preview for security purposes. It’s hard to be sure that it’s going to work well on most browsers (important if you want to publish it).

Furthermore, if the website has a reactive design, it shouldn’t need a rescaling.

#7

At first I was thinking about simple input box for the width and the height, would it help you? On mac, the resizing is easy for me.

Do you always use the same size? I would imagine that you want different size depending on the url.

#8

Oh, yeah the input box should work for my use case as long as the dimensions don’t reset each time I use the plugin, but maybe the preset idea would help for others.

I personally always use the same size for YT vids (I don’t use iframe for anything else), but I’d also imagine others wanting to use different sizes on specific URLs just as you say. In either case, the input box (and presets ¯\_(ツ)_/¯) would be helpful.

Maybe the dimensions in the input box could also change as the user manually resizes the preview.

#9

Alright, I’ll start with the input box when I’ve some time. I should be easy to link to the resize.
The only detail, is that I want to keep the fixed width to 100% (the width of the document, I find it a nice feature).

I’ve got to check what’s the best way to store settings for a plugin.

1 Like
#10

Would be fantastic if we could do something like this.

![Youtube link](https://www.youtube.com/watch?v=XYZ)

This would be more consistent with the way that Obsidian behaves elsewhere.

1 Like
#11

Hi, I tried using your plugin but ran into an issue. I can’t see the checkbox for the iframe width:

image
image786×551 88.3 KB

In preview then the embed is very narrow:
image

Do you have an idea what the problem could be?
Thanks!

#12

Are you using the “Minimal” theme? I had the same problem, and realized it has something to do with my theme settings.

#13

Yes, I’m using the “Minimal” theme.
Did find a solution or workaround for the issue?

#14

Hey, sorry for late answer. No, no solution other that switching theme when using the plugin. I ended up just creating some templates for embedding instead.

#15

I tried this plugins but that’s not what I was looking for.
I just don’t want to do anything with a link to “convert” it. Why not to add a drop-down icon to expand a link into preview iframe automatically?