HTML <img> and 'video' tags are not working in obsidian

Help
1

What I’m trying to do

I want to use HTML <video> tags because it offers more options such as autoplay, hiding controls etc.

but the <video> / <img> tags display nothing, I have tried linking to files that are in the same directory as the .md document as well as a /media/ directory inside the vault.

Things I have tried

I created a new default vault, with no configurations and tested the following document:

# With Markdown Tags
![](./img1.png)
![](./vid1.mp4)

![](/media/img2.png)
![](/media/vid2.mp4)

# With HTML Tags
<img src="./img1.png"></img> 

<video src="./vid1.mp4"></video> 

<video src="/media/img2.png"></video> 

<img src="/media/vid2.mp4"></img>

The vault folder structure is:

C:\Temp\
	C:\Temp\doc\
		C:\Temp\document.md
		C:\Temp\doc\img1.png
		C:\Temp\doc\vid1.mp4
	C:\Temp\media\
		C:\Temp\media\img2.png
		C:\Temp\media\vid2.mp4

But as you can see HERE, the Markdown tags work but the HTML tags are not working at all.

I am on the latest version of Obsidian and Windows 11. I would appreciate if anyone confirm for me if this works for them

Any help would be greatly appreciated!

2

Have you tried with doc/img1.png?

I’ve gotten something like this to work formerly, and then I used some scripting in order to get the proper start of the full path. Search the forum, and you might find it. (I’m a little busy but just wanted to mention that it can be done)

1 Like
3

The FR and discussion for relative links is here:

For now, this works with images:

<img src="file:///Users/USER/Desktop/123.png"/>

For video, this shows me the first frame but there are no video controls:

<video src="file:///Users/USER/Desktop/123.mp4"/>
2 Likes
4

Thank you to both of you, with your help I figured it out.

This path structure (fileo///<absolute path>) is found by opening a local image in Firefox (it will not work with videos). On the page displaying the image:

  • Right Click
  • Inspect
  • In the <img> tag, you will find the path

All the following styles work, the folder is external to the vault. It works both for video/img:

<video src="file:///C:/test99/vid.mp4" autoplay nocontrols></video>
<video src="file:///C:/test99/vid.mp4" autoplay></video>
<video src="file:///C:/test99/vid.mp4"></video>
<video src="C:\test99\vid two.mp4" autoplay></video>   // You can have spaces in the path
<img src="C:\test99\Clipboard Image.jpg"></img>

example - 1

<img src="C:\test99\Clipboard Image.jpg"></img>

example - 2

<video src="C:\test99\vid two.mp4" autoplay></video>

example - 2

<video src="C:\test99\vid two.mp4" autoplay></video>
1 Like
5

What I’m trying to do

I want to start using <video> exclusively from now on over ![](/path/to/video.mp4), simply because it offers much more control, autoplay, loop, hide controls etc.

Things I have tried

But for some reason, <video> tags do not work if the path is relative to the current .md file or the vault. It will only work if I provide a full path in this format:

<video src="file:///C:\Users\ralf\documents\markdown-env\vid.mp4" autoplay nocontrols></video>

None of the following work:

<video autoplay loop  muted src="./vid.mp4"></video> 
<video autoplay loop  muted width="500" height="300" src="vid.mp4"></video>

This recording shows a video in a .md file, in a clean Obsidian vault. The video is not being shown. The same .md file is open in VsCode in the background and the video is playing:
|800

I am on the latest version of Obsidian and Windows 11. I would appreciate if anyone confirm for me if this works for them

Thanks for any help.

6

Please don’t start duplicate threads. I’ve moved this over here. I’ll increase the timer so it won’t close so soon, though you (or someone) did mark it as solved.

Sorry if I’m missing the reason this was a separate thread.

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.