Videos (webm & mp4) not displaying correctly in Browser

[pipe-organ]

First off, thank you for this fantastic plugin! I've tried nearly every Obsidian MkDocs plugin, and this is the only one that displays all images perfectly without requiring any changes to the Obsidian Vault. I really appreciate all your hard work.

While the images work flawlessly, I'm having trouble displaying videos using the plugin. Here's what I've tried in Obsidian:

# These didn't work
![[Apple1984.webm]]
![[Apple1984.mp4]]

![[/assets/Apple1984.webm]]
![[/assets/Apple1984.mp4]]

<video width="600" controls>
  <source src="Apple1984.webm" type="video/webm">
</video>

<video width="600" controls>
  <source src="Apple1984.mp4" type="video/mp4">
</video>

# This worked
<video width="600" controls>
  <source src="/assets/Apple1984.webm" type="video/webm">
</video>

<video width="600" controls>
  <source src="/assets/Apple1984.mp4" type="video/mp4">
</video>

Any insight on how to get videos working?

[GooRoo]

I have to admit I've never tried it with videos, so perhaps the support is just not there. I'll take a look what I can do.

[GooRoo]

@pipe-organ Would you mind trying this? https://github.com/orobardet/pymarkdown-video
It looks like it should work fine together with my plugin.

[pipe-organ]

Thanks so much for checking it out, @GooRoo!

I tested pymarkdown-video, but it seems like it only works if you provide the full absolute path to the video file. So this markdown extension didn't do anything since I was able make videos work by giving it a full absolute path.

I was having a similar issue with images when not using your mkdocs-obsidian-bridge plugin. However, your plugin fixed the image issue, so I was hoping it would also resolve the problem with video files.

BTW here are my paths just in case I am doing wrong.

# This is my docs_dir: Wiki
/Users/pipeorgan/Documents/MkDocs/Wiki

# yml file
/Users/pipeorgan/Documents/MkDocs/mkdocs.yml

# My images and movs are located here
/Users/pipeorgan/Documents/MkDocs/Wiki/assets 

![[Apple1984.webm]]
![[Apple1984.mp4]]

![[/assets/Apple1984.webm]]
![[/assets/Apple1984.mp4]]

<video width="600" controls>
  <source src="Apple1984.webm" type="video/webm">
</video>

<video width="600" controls>
  <source src="Apple1984.mp4" type="video/mp4">
</video>

<video width="600" controls>
  <source src="/assets/Apple1984.webm" type="video/webm">
</video>

<video width="600" controls>
  <source src="/assets/Apple1984.mp4" type="video/mp4">
</video>

[GooRoo]

Okay, thanks for the info, I'll check this on my side too.

[pipe-organ]

I’m starting to think this isn’t related to your plugin after all—sorry for barking up the wrong tree.

Using absolute path with the pymarkdown-video plug-in you mentioned works well. So I'll stick with this. So please mark this close this and thanks again for the awesome plugin and for taking the time to look into this!

![](/assets/Apple1984.webm)

[GooRoo]

I actually tried it myself, and indeed, it does not work as I expected it to. So now it bothers me 🙂 I can't simply close the issue. Will try to come up with something.

[GooRoo]

Okay, so as a temporary solution, you can manually install this https://github.com/GooRoo/obsidian-media using pip install obsidian-media or whatever you use instead, and then enable it in your mkdocs.yml. It's kinda similar to previously mentioned pymarkdown-video with the difference that it should work 🙂 (at least I hope so).

In the next version of mkdocs-obsidian-bridge, I'm going to add it as a dependency so that it's always available for users.

[AtticusZeller]

@GooRoo hey bro,thanks for build the useful plugin!it do help me a lot!
i find the callout in our roadmap,so i think the code in the plugin maybe help a lot😁

[pipe-organ]

@GooRoo Wow bravo!! Finally had a time to sit down and try this and it works beautifully. Even Obsidian wiki link style movie files work flawlessly!! Thanks you so much for sharing these awesome plugins!!
![[niceMovie.webm]]

[GooRoo]

Hey guys. Now (since 1.1.0), this functionality is available out of the box. You don't need to install anything additional, just pip install mkdocs-obsidian-bridge and enable this in your mkdocs.yml:

plugins:
  - obsidian-bridge

markdown_extensions:
  - obsidian_media_mkdocs  # this thing embeds audio/video/YouTube

[pipe-organ]

I just rebuilt my virtual environment from scratch, only installing mkdocs-obsidian-bridge. Without any modifications in Obsidian, all videos, audio, and images work perfectly and render identically in the browser. It's absolutely fantastic! Thanks again for sharing this!

[Ray-Lei-17]

Hey guys. Now (since 1.1.0), this functionality is available out of the box. You don't need to install anything additional, just pip install mkdocs-obsidian-bridge and enable this in your mkdocs.yml:

plugins:
  - obsidian-bridge

markdown_extensions:
  - obsidian_media_mkdocs  # this thing embeds audio/video/YouTube

Works absolutely fine! I love you!