youtube-vimeo-remark-youtube

Gridsome Remark YouTube Plugin

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

Installation

npm i youtube-vimeo-remark-youtube
# yarn add youtube-vimeo-remark-youtube

Loading

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

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:dQw4w9WgXcQ`

or

`vimeo: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:

https://github.com/markhoney/gridsome-plugin-remark-youtube