iFrame of local html file is not showing anything

Steps to reproduce

Load any local html file inside iframe.
I tried several syntax for local file eg. ( src="file:///)

Expected result

I wanted to see the html file show inside iframe.

Actual result

There is emptiness inside iframe file.

Environment

  • Operating system: Mac OS
  • Obsidian version: 0.82

Additional information

<iframe id="serviceFrameSend" src="Path/test.html" width="800" height="8000" frameborder="1">

5 Likes

we don;t support that at the moment. It’s a current limitation of electron. I move this to feature request.

1 Like

Please make it happen :pray:t3: As the Obsidian is primary offline software this should be supported. With this feature user can cover many missing features in Obsidian. It will also allow more flexibility for plugin development! Thank you a lot

6 Likes

Hello WhiteNoise,
I tried to learn Electron a bit. I made a HTML which had some tags referring to https://videojs.com/html5-video-support/ (As I know, the referred sit provides kind of a video player) and then made a main.js which was used by Electron. Then the result program can pick local video files and play them.
Do you think the Obsidian can do the same thing or better ? I really hope the Obsidian can play videos and set the timestamp in playing.

For anyone else stumbling across this thread in search for the same answer.
There is a way to do it, as described in the parent post of this thread:

<iframe src=file:///Users/yummy/path/to/vault/res/abc.html></iframe> :+1:

1 Like

Thanks for the lead sir or ma’am! I found your post above after several hours going from one lead to the next (no joke—I know nothing!) lol Here’s what I did, hope it helps someone else if, like me, you find yourself in a “situation”. :slight_smile:

I was using the Minimal theme and wanted to substitute the font used for footers and references:

OS: Windows 10
Obsidian v0.13.23
Local vault on D:\

  1. Download and install your font (right-click, ~Install)
  2. Create new or open existing snippet CSS file
/* note the src is local and not URL, 
   mind the comma between my two local sources,
   and no need to put the full path */
@font-face {
    font-family: 'Reforma1918';
    src: local("Reforma1918-BlancaItalica.ttf"),
		 local("Reforma 1918 Blanca Italica");
    font-style: italic;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

/* isolate the area you need to modify, for me it was footers and references, 
   the key is to specify the font-family from above */
.cm-s-obsidian span.cm-footref, .cm-s-obsidian span.cm-blockid {
    display: inline-block;
    font-size: 0.75em;
    vertical-align: text-top;
    color: var(--text-faint);
    margin-top: -0.15em;
	font-family: Reforma1918;
	font-weight: 300;
}
  1. Save your CSS snippet
  2. Make sure to reload and enable your CSS snippet if it’s brand new otherwise the changes should be automatic