@hongvanpc10/rehype-embed

Add improved video syntax: support embeds videos from youtube links.

Installation

This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.

1npm install @hongvanpc10/rehype-embed

Or

1yarn add @hongvanpc10/rehype-embed

Usage

1import { unified } from 'unified'
2import remark2rehype from 'remark-rehype'
3import remarkParse from 'remark-parse'
4import rehypeEmbed from '@hongvanpc10/rehype-embed'
5import stringify from 'rehype-stringify'
6
7const string = `{@embed:https://www.youtube.com/watch?v=xsI0j3pO7vc}`
8
9const htmlStr = unified()
10  .use(remarkParse)
11  .use(remark2rehype)
12  .use(rehypeEmbed)
13  .use(stringify)
14  .processSync(string)
15  .toString()

Output:

1<p>
2  <iframe
3    src="https://www.youtube.com/embed/xsI0j3pO7vc"
4    style="width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem"
5    frameborder="0"
6    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
7    allowfullscreen=""
8  ></iframe>
9</p>

Custom Style

1const string = `{@embed:https://www.youtube.com/watch?v=xsI0j3pO7vc}`
2const htmlStr = unified()
3  .use(remarkParse)
4  .use(remark2rehype)
5  .use(rehypeEmbed, {
6    style: 'width: 100%; aspect-ratio: 16 / 9; border-radius: 20px;',
7    class: 'iframe'
8  })
9  .use(stringify)
10  .processSync(string)
11  .toString()

Output:

1<p>
2  <iframe
3    src="https://www.youtube.com/embed/xsI0j3pO7vc"
4    style="width: 100%; aspect-ratio: 16 / 9; border-radius: 20px"
5    class="iframe"
6    frameborder="0"
7    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
8    allowfullscreen=""
9  ></iframe>
10</p>

Options

Option	Type	Default
style	string	'width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem'
allow	string	'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
allowfullscreen	boolean	true
class	string

License

MIT © Hong Van