Search code examples
markdowndocusaurus

Docusaurus 2 inclusion of a video file in a markdown file

Using Docusaurus for help documentation. I can include images, gifs, and reference a youtube video (use iframe). But it is not clear to me how to include a video in a markdown file.

I am expecting the video to be in my repo (i.e. src="./assets/my-video.mp4" type=video/mp4").

There has been discussion on this issue, but I have not been able to find a simple example referencing a video.

Solution

  • You need to install the react-player, create a file with .mdx extension and add the video.

    1) Install the react-player:

    npm install react-player

    2) In your file, for example Intro.mdx, insert at the top (bellow the --- if present):

    import ReactPlayer from 'react-player'

    then insert the video, wherever you want it:

    <ReactPlayer playing controls url='video.mp4' />

    IMPORTANT

    1. I am having some trouble trying to render videos using relative path. So maybe better putting them inside the static folder, then calling using <ReactPlayer playing controls url='/video.mp4' /> (note the / before the filename).

    2. I forgot to change the extension to mdx. But it is working fine with md extension files.

    REFERENCES

    1. I followed the link you provide to learn how to do it
    2. https://github.com/facebook/docusaurus/issues/489
    3. https://www.npmjs.com/package/react-player

    NOTE: Use the reference #3 to learn more about the react-player! There are a lot of cool stuff you can use on the video player.

    DISCLAIMER

    Like endiliey said in your reference link, it is super easy — for those who are familiarized with the technology. Which was not my case… But was fun to learn about it!