14

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.

Mark Underseth
  • 143
  • 1
  • 6

6 Answers6

10

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!

yivi
  • 42,438
  • 18
  • 116
  • 138
D.Kastier
  • 2,640
  • 3
  • 25
  • 40
  • 1
    Thanks for the info. Yes, it is quite easy "once you know the steps". I got hung up on the path for the mp4 file. – Mark Underseth Sep 15 '21 at 21:38
  • Doesn't work. The play button doesn't start the video\ – Pian0_M4n Nov 02 '22 at 08:51
  • @Pian0_M4n, have you put your video inside your static folder? I had problems using relative links. (check the "IMPORTANT" section in my answer) – D.Kastier Nov 02 '22 at 13:29
  • 1
    Thanks @D.Kastier this is the answer I followed, although I had to add a bit more things, since my BaseUrl wasn´t '/'. I added an answer as a suggestion for your method, for people tha need relative paths. – Omar Yafer Apr 25 '23 at 16:45
6

You can use react-player library as D.Kastier suggested, but you can also use a video tag.

0. What doesn't work

<video controls>
  <source src="./up%20nd%20down.mp4"/>
</video>
<video controls>
  <source src="./up and down.mp4"/>
</video>

1. What work: Local

import upAndDownURL from './up and down.mp4';

<video controls>
  <source src={upAndDownURL}/>
</video>

Careful ! import upAndDownURL from './up%20and%20down.mp4'; will not work.

2. What work: Static/Public folder

myVideo.avi need to be put under <project_root>/static folder.

<video controls>
  <source src="/myVideo.avi"/>
</video>
Ambroise Rabier
  • 3,636
  • 3
  • 27
  • 38
  • This also works with remote resources, i.e. - videos [uploaded through GitHub](https://github.blog/2021-05-13-video-uploads-available-github/). Just pass the generated URL to src. – Jaime Still Aug 01 '23 at 17:10
1

This is meant as a suggestion to the answer provided by @D.Kastier wich I myself used. @D.Kastier is using reactPlayer but was having problems with relavite paths and this is how i fixed it in my project:

IMPORTANT

I am having some trouble trying to render videos using relative path.

If you use the method described by @D.Kastier you will need to add import statements for the URLs of your videos and/or thumbnails.

import ReactPlayer from 'react-player'
import MyVideoUrl from './video/myVideo.mp4';
import MyThumbnailUrl from './video/myVideo.png';

and in the tag for Reactplayer you will use the imported URLs like so:

<ReactPlayer playing="true" controls url={MyVideoUrl} light={<img src={MyThumbnailUrl} alt='Thumbnail' />}/>

I´m using a Thumbnail for my videos and needed an URL for the video.

Altough it has few things to do with this answer this is also an useful import to have in your .mdx files

import useBaseUrl from '@docusaurus/useBaseUrl';
Omar Yafer
  • 823
  • 6
  • 17
0

Here is a responsive option

Install react-player by running npm install react-player

In intro.mdx

---
slug: /
sidebar_position: 1
---
import ReactPlayer from "react-player"

<div className="video__wrapper">
    <ReactPlayer className="video__player" controls height="100%" url="https://storage.googleapis.com/files.school-app.bujus.de/school-instructions-v2-compressed.mp4" width="100%" />
</div>

In custom.css

.video__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Video aspect ratio: 100 / (16 / 9) */
}

.video__player {
  position: absolute;
  top: 0;
  left: 0;
}

You may have to adjust the padding-bottom value. The formula to calculate it is besides the value.

When you want a break line below the video add ­{" "} below the </div>.

You may want to add a thumbnail image with something like the following code:

config={{
  file: {
    attributes: {
      poster:
        "https://thumbnail.jpg",
    },
  },
}}
juliushuck
  • 1,398
  • 1
  • 11
  • 25
0

I can't comment, but just complementing the answer above, you can treat as an HTML file, so after the controls on <video controls>you can add width, height, style...

<video controls width="90%">
  <source src="/uploads/VideoName.mp4"/>
</video>

The video can be in any folder inside the static folder, but I've tried to go from that directory backwards and couldn't.

Alysson_Teixeira
  • 1
  • 2
0

You should be able to add an iframe directly in mdx file

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/lHu02MWIPUY"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>
Mahesh Jamdade
  • 17,235
  • 8
  • 110
  • 131