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
moduleexports = 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 toauto
to align the video centrally.
Loading with options:
moduleexports = 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:
Generated HTML
This is the HTML that is being generated by the plugin and injected into the page:
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: