^{Using my app is also a way to support me:}

rehype-video === [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor) [![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove) [![Downloads](https://img.shields.io/npm/dm/rehype-video.svg?style=flat)](https://www.npmjs.com/package/rehype-video) [![NPM version](https://img.shields.io/npm/v/rehype-video.svg?style=flat)](https://npmjs.org/package/rehype-video) [![Build](https://github.com/jaywcjlove/rehype-video/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/rehype-video/actions/workflows/ci.yml) [![Coverage Status](https://jaywcjlove.github.io/rehype-video/badges.svg)](https://jaywcjlove.github.io/rehype-video/lcov-report/) [![Repo Dependents](https://badgen.net/github/dependents-repo/jaywcjlove/rehype-video)](https://github.com/jaywcjlove/rehype-video/network/dependents) Add improved video syntax: links to `.mp4` and `.mov` turn into videos. like [`github video`](https://github.blog/2021-05-13-video-uploads-available-github/) features. The following is a sample test of the video preview in GitHub: https://user-images.githubusercontent.com/1680273/138299599-88547edd-859c-44c9-8b52-2cc06f7f2dd3.mov?!#title=Example%20Display ## Installation This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be import instead of require. ```bash npm install rehype-video ``` ## Usage ```js import { unified } from 'unified'; import remark2rehype from 'remark-rehype'; import remarkParse from 'remark-parse'; import rehypeVideo from 'rehype-video'; import stringify from 'rehype-stringify'; const string = ` https://files.github.com/001.mp4 hi! https://files.github.com/002.mp4 Good \`idea\`!! https://github.com/002.mp4?!#title=Custom%20Title `; const htmlStr = unified() .use(remarkParse) .use(remark2rehype, { allowDangerousHtml: true }) .use(rehypeVideo) .use(stringify) .processSync(string) .toString(); ``` Output: ```html

https://files.github.com/001.mp4 hi!

002.mp4

Good idea!!

Custom Title

``` ### Example 1 ```js import { rehype } from 'rehype'; import rehypeVideo from 'rehype-video'; const mrkStr = `

https://github.com/004.mp4

`; const htmlStr = rehype() .data('settings', { fragment: true }) .use(rehypeVideo, { details: false }) .processSync(mrkStr) .toString(); ``` Output: ```html

``` ### Example 2 ```js import { rehype } from 'rehype'; import rehypeVideo from 'rehype-video'; const mrkStr = `

https://github.com/004.mp4 ``` ### Example 3 ```js import remarkParse from 'remark-parse'; import rehypeVideo from 'rehype-video'; import { unified } from 'unified'; import remark2rehype from 'remark-rehype'; import remarkParse from 'remark-parse'; import stringify from 'rehype-stringify'; const mrkStr = 'https://github.com/user-attachments/assets/0d808e2e-84c7-46ca-a220-440fa9f34118?title=rehype-video&rehype=video' const htmlStr = unified() .use(remarkParse) .use(remark2rehype, { allowDangerousHtml: true }) .use(rehypeVideo, { test: (url) => { return /\.(mp4|mov)|[?&]rehype=video/i.test(url); } }) .use(stringify) .processSync(mrkStr) .toString(); ``` Output: ```html

rehype-video

``` ## Custom Title Define custom title parameter(E.g: `title=RehypeVideo`) with hash route: ```js const string = `https://github.com/002.mp4?!#title=Custom%20Title`; const htmlStr = unified() .use(remarkParse) .use(remark2rehype, { allowDangerousHtml: true }) .use(rehypeVideo) .use(stringify) .processSync(string) .toString(); ``` Output: ```html

Custom Title

``` ## \ We will reference all two of the relevant VTT files by adding [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) elements inside our HTML [\