Gridsome Remark Video Embeds Plugin

This is a plugin for Gridsome's chosen markdown engine, Remark, and allows you to, currently, embed YouTube and Vimeo videos in markdown files.

Installation

Not currently available on npm, testing/personal use for the moment. See ryland/gridsome-plugin-remark-youtube for a solid working Youtube embed implementation for Gridsome.

Loading

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            ['gridsome-plugin-remark-video-embeds']
          ]
        }
      }
    }
  ]
}

Options

There are options to change width of the video, and whether the video is left aligned or centred:

• width Default 100%. Set to any valid CSS width.
• align Default 0. The default left aligns the video. Set to auto to align the video centrally.

Loading with options:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            ['gridsome-plugin-remark-video-embeds', {width: '500px', align: 'auto'}]
          ]
        }
      }
    }
  ]
}

Usage

This plugin borrows the syntax used in the Gatsby Instagram Embed plugin, and my in-progress instagram embed plugin (paused due to Facebook) of using Markdown image alt tags ![youtube](video-id) to embed posts.

`![youtube](dQw4w9WgXcQ)`

Vimeo

`![vimeo](dQw4w9WgXcQ)`

Output

Video

This is how the video should appear on the screen:

Generated HTML

This is the HTML that is being generated by the plugin and injected into the page:

<div style="width: 100%; margin: 0 auto;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe></div></div>

License

MIT

Credit

This plugin is a combination of the Gatsby Instagram embed syntax and Gridsome Remark Youtube plugin for handling the Gridsome specific implementation.