add image-like syntax support for video files in markdown (#5904)

gatsby-config.js

@@ -81,6 +81,9 @@ module.exports = {
                     {
                         resolve: require.resolve(`./plugins/gatsby-remark-mermaid`),
                     },
+                    {
+                        resolve: require.resolve('./plugins/gatsby-remark-video'),
+                    },
                 ],
                 plugins: [`gatsby-remark-static-images`],
             },

plugins/gatsby-remark-video/index.js

@@ -0,0 +1,18 @@
+const visit = require('unist-util-visit')
+const fs = require(`fs-extra`)
+const path = require(`path`)
+const isRelative = require('is-relative')
+
+module.exports = ({ markdownAST }) => {
+    visit(markdownAST, `image`, (node) => {
+        const fileType = node.url.split('.').pop()
+        if (fileType === 'mp4') {
+            node.type = `html`
+            node.value = `<video autoplay loop muted playsinline src="${node.url}"></video>`
+            return node
+        } else {
+            return null
+        }
+    })
+    return
+}

plugins/gatsby-remark-video/package.json

@@ -0,0 +1,5 @@
+{
+    "name": "gatsby-remark-video",
+    "version": "0.1.0",
+    "main": "index.js"
+}

src/templates/BlogPost.js

@@ -131,6 +131,11 @@ export default function BlogPost({ data, pageContext, location }) {
         inlineCode: InlineCode,
         blockquote: Blockquote,
         img: ZoomImage,
+        video: (props) => (
+            <ZoomImage>
+                <video {...props} />
+            </ZoomImage>
+        ),
         a: A,
         TutorialsSlider,
         ...shortcodes,