How to embed videos (.mp4, .gif, etc.)?

[UltraInstinct05]

Has anyone ever embedded videos in Mkdocs for material to demonstrate particular concepts ? Any stuff you could recommend in terms of what software you use to make the videos/gifs and perhaps making to look good overall in light/dark mode etc.

[facelessuser]

Those are all good ways. It depends on what you are trying to do. Often, a simple GIF has worked for me in the past. I've used LICEcap which works on macOS and windows. It's pretty basic but gets the job done. Your needs may be more complex than what I've generally needed though.

There are ways to potentially include dark and light variants of videos and only show one specific one during light or dark mode, but I honestly have never gone down that road. I usually just pick a scenario to record in and that is what I use in both light and dark mode.

Others may have solutions that may fit your needs more 🤷🏻 .

[squidfunk]

We use Streamable for the Insiders demo video. You can embed it via an iframe, i.e. something like:

<iframe src="https://streamable.com/e/yslhdu" allowfullscreen></iframe>

[UltraInstinct05]

I thought that particular page https://squidfunk.github.io/mkdocs-material/insiders/ always had an empty space. Never knew it was a video, because it never loaded for me on both Firefox & Chrome whenever I used the docs. I have a pretty decent internet connection speed, though.

[squidfunk]

Interesting, never seen that. It also works for me on slow connections. However, it might be related to a browser extension you're using. Try opening the page in incognito mode. EDIT: or Streamable just doesn't work in India 🤷‍♂️

[UltraInstinct05]

Your are right. Looks like it's blocked in India. https://www.reddit.com/r/india/comments/7wsa8s/streamable_not_working_in_india/

[squidfunk]

Meh.

[davideriboli]

If you can host your own video files, these lines work great.

<figure class="video_container">
  <video controls="true" allowfullscreen="true" poster="/path/to/poster.png">
    <source src="/path/to/video.mp4" type="video/mp4">
    <source src="/path/to/video.ogg" type="video/ogg">
    <source src="/path/to/video.webm" type="video/webm">
  </video>
</figure>

[gorger3]

Sorry, but this doesn't work. When built locally the page shows video block with the play button being inactive.

[kamilkrzyskow]

No need to message multiple times that it doesn't work.

What do you mean exactly by built locally?

What's the URL to the video in the embed?

Could be an issue with CORS if trying to open a video file from another server.

Perhaps you've used a relative path which isn't correct.

Please provide a minimal reproduction someone could try out and compare.

https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/

[gorger3]

Thank you for reply.
I left two messages for two different solutions. I tried both on one page. I agree that it looks redundant.
By "built locally" I mean local server built by mkdocs serve --dirtyreload command.
The path is local. Video file is in the same folder as the page itself:

<video width="640"  controls>
    <source src="video-1.mp4" type="video/mp4">
</video>

File video.html in the same folder and with the same code opened in Chrome works well. So the path to the file is correct.

[HotCakeX]

This works perfectly

<video controls>
<source src="VideoURL.mp4" type="video/mp4">
</video>

https://spynetgirl.github.io/Harden-Windows-Security-Module/Harden-Windows-Security-Module/#quick-demo

[gorger3]

@alexvoss , thank you very much! Your advice helped me to find the cause. Chrome's devtools showed me that the browser "Failed to load resource: the server responded with a status of 404 (Not Found)"

Here is the directory tree:

• folder1
  • folder2
    • video-player.md
    • video.mp4
    • image.png

Results:

First try that failed.

Here I put the path to video file as I did it in Markdown syntax for images:

N	What I did in MkDocs' Markdown	What I saw in Chrome's HTML
1		<img alt="alt text" src="../image.png">
2	<source src="video.mp4" type="video/mp4">	Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8000/folder1/folder2/video-player/video.mp4 Looking for a video file in a video-player folder that doesn't exist.

Second try that was successful.

Here I changed the path to video file according to HTML in Chrome:

N	What I did in MkDocs' Markdown	What I saw in Chrome's HTML
1		<img alt="alt text" src="../image.png">
2	<source src="../video.mp4" type="video/mp4">	<source src="../video.mp4" type="video/mp4"> http://127.0.0.1:8000/folder1/folder2/video.mp4 Taking the video file in the folder2 that contains the video file.

[blaylockbk]

Thanks for sharing this. I also had an issue linking a local video file. Had to do ../video.mp4 instead of video.mp4 for whatever reason.

[alexvoss]

If you have use_directory_urls turned on in your mkdocs.yml, MkDocs will turn a file video-player.md into video-player/index.html so as to produce more user-friendly URLs ending in video-player/. This is the default. It means that your video now lives a level above the page that the user is viewing. That is why the video needs to be fetched from a level above.

[blaylockbk]

If you have use_directory_urls turned on in your mkdocs.yml, MkDocs will turn a file video-player.md into video-player/index.html so as to produce more user-friendly URLs ending in video-player/. This is the default. It means that your video now lives a level above the page that the user is viewing. That is why the video needs to be fetched from a level above.

Thanks for explaining this reason!

[kolibril13]

my observation:
Version A) always works. Version B) ONLY works in index.md, not on other pages, even if they are not subchapters.

Version A)
<video controls src="../video.mp4" title="Title"></video>
Version B)
<video controls src="video.mp4" title="Title"></video>