Comments (8)
So, IMO, go ahead with the change (the code is a lot cleaner), but maybe also add something about this to the readme and/or release notes, since I expect I won't be the only one that will have to reinstall Obsidian to get this to work.
Obsidian is still pre-v1 (although not explicitly "beta"), so I think users should expect things like this, and this probably won't be the only thing eventually breaking, if you have an old version of Electron, so updating it is a smart idea anyway.
from obsidian-convert-url-to-iframe.
The latter version doesn't seem to give the correct height? But the code could definitely be simplified.
from obsidian-convert-url-to-iframe.
@kankaristo Thanks for testing it. What did you try?
Ah! It seems that the ratio get reversed because in the past we were using a computation with the padding bottom example:
<iframe src="https://www.youtube.com/embed/mSC6GwizOag" allow="fullscreen" style="aspect-ratio:16/9; object-fit:contain; width: 100%;"></iframe>
<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>
from obsidian-convert-url-to-iframe.
I tried that exact same code (the one you pasted in your latest comment), but it doesn't display the same way for me for some reason (I only added -----
in the Markdown before, after and between the iframes to add some space in between):
Could you have some additional CSS on iframes from a theme or CSS snippet? I'm running the default dark theme and even if I turn off all CSS snippets, I'm still getting the above result (I only have border: 0;
for iframes in my CSS snippets, but disabling all snippets doesn't affect the above result).
EDIT: I also tried turning on "safe mode" so that all community plugins are disabled, in case they have some extra CSS breaking this, but I still get the same result.
from obsidian-convert-url-to-iframe.
Obsidian's DevTools is showing:
If I hover over the warning, it says "unknown property name". The same CSS works as expected if I try it in Chrome, but the aspect-ratio
property seems to be missing in whatever version of Electron Obsidian runs on. I'm on Linux/Ubuntu, and I have the latest version of Obsidian (v0.12.19).
from obsidian-convert-url-to-iframe.
Okay, I got it to work now...
According to the release notes for Obsidian v0.12.3 you have to "explicitly" reinstall Obsidian to get the Electron 12 update (Obsidian's internal auto-update can't update it, apparently). And apparently before version 12, Electron didn't support aspect-ratio
.
So this change might require a "manual" update of Obsidian for users, but I expect this isn't the only thing that will break eventually, if Electron isn't actually updated alongside Obsidian.
If Obsidian had a package repo for Linux, like most apps, instead of using only Flatpak/Snap/AppImage, this wouldn't be a problem. But using Flatpak/Snap/AppImage is the trendy new thing, so... Hopefully those will mature to have proper package management.
from obsidian-convert-url-to-iframe.
@kankaristo Thanks a lot for the investigation! I agree with you, it's a nice improvement worth the upgrade and we'll require a note in the readme/realease notes.
I plan to work on that this Saturday.
from obsidian-convert-url-to-iframe.
Done
from obsidian-convert-url-to-iframe.
Related Issues (20)
- [Feature Request] Allow conversion with right click context menu HOT 1
- Doesn't extract timestamp from given link HOT 1
- match note width HOT 1
- Latest Update Fails to Install HOT 3
- YouTube fullscreen disabled HOT 3
- URL converted to iframe wrongly HOT 4
- Just saying bravo! HOT 1
- Iframe element generated twice? HOT 1
- Mobile support HOT 6
- Background and Text Legibility HOT 2
- Add preview link dynamically in view mode HOT 1
- Manually add a timestamp HOT 1
- Context Menu Doesn't Work HOT 2
- Does not recognize uncommon top level domain (TLD) HOT 1
- Calling Url to Iframe from Templater
- WeChat reading can't log in HOT 2
- Can this plugin support remembering the webpage position?
- can't open localhost
- new Hotkey
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from obsidian-convert-url-to-iframe.