GatsbyJS has a great plugin for embedding hosted videos to your markdown with gatsby-remark-embed-video.

What if you want to add your add your own HTML5 videos, locally hosted from your static folder? Now you can with the gatsby-remark-videos plugin.

When Not To Do This

Before you decide to do this, keep in mind that there are a number of reasons why you would not want to do this.

• Bandwidth: By hosting video on your own server, you add a lot of overhead to your gatsby project. An HD video file can easily weigh in at over 100MB! Too many requests for a single large file can bring your whole project down.

• Slow Loading: You force visitors to download your video files when they hit the page. If the files are large, you can run into all kind of performance issues. Some visitors will experience slow load times, and mobile users may not even get to see it.

• Loss Of Visibility: YouTube and Vimeo are the most popular video hosting websites in the world. It is usually the place people go to when they are search for a topic. When you embed video from these websites, you take advantage of their popularity. By hosting your own video, your content loses a lot of visibility.

• Piracy: If you want to protect your video content from being downloaded and redistributed illegally, you will want to make sure that your static files are secure.

So when would you ever want to do this?

If you are hosting relatively small videos and you don't care about security or visibility, then hosting your own video has a few benefits. For one, you dodge the YouTube/Vimeo web players which gives you more control over the user experience. You won't have links to related videos appear, or otherwise direct your visitors to other websites. You also gain some SEO exposure on your domain which can be a determining factor when choosing between hosting sites and self-hosting.

How Do We Do It?

We will need two plugins to add video to our markdown. First, we need to install gatsby-remark-plugin-ffmpeg to convert our files to .mp4 and .webm files.

npm install --save gatsby-remark-plugin-ffmpeg

And we will also install gatsby-remark-videos

npm install --save gatsby-remark-videos

which inserts will use the same syntax as markdown images, so that

![](video.avi)

will be inserted into the DOM like this:

<video autoplay loop>
    <source src="/static/video-hash-optshash.webm" type="video/webm" />
    <source src="/static/video-hash-optshash.mp4" type="video/mp4" />
</video>

Then add the following to your gatsby-config.js:

plugins: [
  ...
  gatsby-plugin-ffmpeg`,
  {
    resolve: `gatsby-remark-videos`,
    options: {
      pipelines: [
        {
          name: 'vp9',
          transcode: chain =>
            chain
              .videoCodec('libvpx-vp9')
              .noAudio()
              .outputOptions(['-crf 20', '-b:v 0']),
          maxHeight: 480,
          maxWidth: 900,
          fileExtension: 'webm',
        },
        {
          name: 'h264',
          transcode: chain =>
            chain
              .videoCodec('libx264')
              .noAudio()
              .videoBitrate('1000k'),
          maxHeight: 480,
          maxWidth: 900,
          fileExtension: 'mp4',
        },
      ],
    }
  },
  ...
]

...And there you have it!