Vuepress: How to embed video in markdown

With Vuepress is you can start creating content in Markdown out of the box. And Markdown has tons of useful plugin. When I was updating the Wujiquan website, I wanted to embed videos into the content. While it is possible to add html tags directly within markdown, I want to keep the content clean and simple.

markdown-it-html5-embed

Vuepress supports markdown-it plugins, and https://github.com/cmrd-senya/markdown-it-html5-embed comes to the rescue! Adding

![6 healing sounds video](https://wujiquan.sgp1.digitaloceanspaces.com/Qigong/Wujiquan-six-healing-sounds.mp4)

to the page will render the following in HTML

<source type="video/mp4" src="https://wujiquan.sgp1.digitaloceanspaces.com/Qigong/Wujiquan-six-healing-sounds.mp4">
Your browser does not support playing HTML5 video. You can <a href="https://wujiquan.sgp1.digitaloceanspaces.com/Qigong/Wujiquan-six-healing-sounds.mp4" download="">download a copy of the video file</a> instead.
Here is a description of the content: 6 healing sounds video

Adding Markdown Plugin to Vuepress

 To add the markdown-it-html5-embed plugin, first add the package to your vuepress project

yarn add markdown-it-html5-embed

Then edit your config.js and add the following code

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-html5-embed'), {
        html5embed: {
          useImageSyntax: true,
          useLinkSyntax: false
        }
      })
    }
  },

For more information on the syntax, refer to the markdown-it-html5-embed documentation.