Gridsome Remark YouTube Plugin

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

Installation

npm i gridsome-plugin-remark-youtube
# yarn add gridsome-plugin-remark-youtube

Loading

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

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-youtube', {width: '500px', align: 'auto'}]
          ]
        }
      }
    }
  ]
}

Usage

This plugin uses the same markdown syntax as the Gatsby plugin, with backticks (`) and a youtube: prefix, followed by the YouTube URL. Any valid YouTube URL should work.

`youtube:https://www.youtube.com/watch?v=dQw4w9WgXcQ`

or

`youtube:https://www.youtube.com/embed/dQw4w9WgXcQ`

or

`youtube:https://youtu.be/dQw4w9WgXcQ`

Output

Video

This is how the video should appear on the screen:

<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

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

Some of the code in this plugin was copied from the Gatsby plugin for embedding YouTube videos in markdown:

https://github.com/ntwcklng/gatsby-remark-embed-youtube

To figure out how to convert the above plugin to a Gridsome plugin, I cribbed from Gridsome's Twitter Remark plugin:

https://github.com/danvega/gridsome-plugin-remark-twitter