# remark-iframes

> This plugin parses custom Markdown syntax to create iframes.

Latest version **4.1.1** (published 2024-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-iframes
pnpm add remark-iframes
yarn add remark-iframes
bun add remark-iframes
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.1.1 |
| Published | 2024-04-27 |
| First published | 2017-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 236 |
| Author | François |
| Maintainers | situphen, talone |
| Keywords | remark |

## Links

- npm: https://www.npmjs.com/package/remark-iframes
- Repository: https://github.com/zestedesavoir/zmarkdown.git#master
- Homepage: https://github.com/zestedesavoir/zmarkdown/tree/master#readme
- Issues: https://github.com/zestedesavoir/zmarkdown/issues
- npm.io page: https://npm.io/package/remark-iframes

## Dependencies (1)

- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.1.1 (latest) — 2024-04-27
- 4.1.0 — 2024-01-14
- 4.0.5 — 2021-02-14
- 4.0.4 — 2020-02-03
- 4.0.3 — 2020-01-21
- 4.0.0 — 2019-07-27
- 3.0.8 — 2019-04-14
- 3.0.7 — 2019-02-04
- 3.0.6 — 2018-11-23
- 3.0.5 — 2018-10-04
- 3.0.4 — 2018-08-09
- 3.0.3 — 2018-07-22
- 3.0.2 — 2018-07-20
- 3.0.1 — 2018-03-06
- 3.0.0 — 2018-03-03
- … 27 more at https://npm.io/package/remark-iframes/versions

## README

# remark-iframes [![Build Status][build-badge]][build-status] [![Coverage Status][coverage-badge]][coverage-status]

This plugin parses custom Markdown syntax to create iframes.

This creates a new MDAST element called "iframe"

If you are using [rehype][rehype], the stringified HTML result will be a tag you can configure. Most of time you want `iframe`.

## iframe node type

```javascript
interface iframe <: Node {
  type: "iframe";
  url: string;
  provider: string;
  data: {
    hName: "iframe";
    hProperties: {
      src: string;
      width: 0 <= uint32;
      height: 0 <= uint32;
      allowfullscreen: boolean;
      frameborder: string;
    }
    thumbnail: string?;
  }
}
```

`provider` variable refers to the provider as configured in plugin options.

## Syntax

```markdown
!(https://www.youtube.com/watch?v=8TQIvdFl4aU)
```

## Installation

[npm][npm]:

```bash
npm install remark-iframes
```

## Usage

Dependencies:

```javascript
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkIframe = require('remark-iframes')
```

Usage:

```javascript
unified()
  .use(remarkParse)
  .use(remarkIframe, {
    // this key corresponds to the hostname: !(http://hostname/foo)
    // the config associated to this hostname will apply to any iframe
    // with a matching hostname
   'www.youtube.com': {
      tag: 'iframe',
      width: 560,
      height: 315,
      disabled: false,
      replace: [
        ['watch?v=', 'embed/'],
        ['http://', 'https://'],
      ],
      thumbnail: {
        format: 'http://img.youtube.com/vi/{id}/0.jpg',
        id: '.+/(.+)$'
      },
      removeAfter: '&'
    }
  })
  .use(remark2rehype)
  .use(stringify)
```

## Configuration fields:

- `tag`: HTML tag to use in rehype output, you most probably want `iframe`.
- `width` and `height`: iframe size, set as `width="" height=""` HTML attributes.
- `disabled`: Can be used to disable this provider. This is useful when you want to deal with multiple configurations from a common set of plugins.
- `replace`: Rules passed to `String.prototype.replace` with the `input_url`. It's a list `[[from, to]]`, rules are applied sequentially on the output of the previous rule. Each rule only replaces the first occurrence.
- `removeAfter`: Truncates the URL after the first occurrence of char. For example `http://dailymotion.com/video/?time=1&bla=2` will result in `http://dailymotion.com/video/?time=1` if `removeAfter` is set to `&`.
- `append`: Any string you want to append to the URL, for example an API key.
- `removeFileName`: If set to `true`, removes the filename (i.e last fragment before query string) from URL.
- `match`: a regular expression passed to `String.prototype.test`, used to validate the URL.
- `thumbnail`: a way to retrieve a thumbnail. This param is an object with a `format` key of this type: `'http://url/{param1}/{param2}'` you must then provide patterns `param: 'pattern'` to extract the value which will replace the corresponding `{param}` in the `format` URL.
- `droppedQueryParameters`: a list of query parameters to remove from the iframe source URL.
- `oembed`: an URL to the oEmbed API of the website you want to embed;
- `lazyLoad`: tell browsers to lazy load the iframe whenever possible, using the HTML `loading` attribute.

### oEmbed usage

When using the `oembed` configuration parameter, the other parameters are discarded, excepted for `disabled`, which can be used freely; you may use `width` and `height` if really needed, altough it is not recommended by the oEmbed specification.

The thumbnail is constructed from the oEmbed `thumbnail_url` response, so there is no need for providing any URL, and any configuration will not be taken into account.

### Thumbnail construction

when you configure the `thumbnail` as part of a provider, the URL of the thumbnail is computed following this algorithm:

```
thumbnail_url_template = provider.thumbnail.format
for each property of provider.thumbnail
  if property is not "format":
    regexp_for_current_property = provider.thumbnail[property]
    extracted_value = video_url.search(regexp_for_current_property)[1]
    thumbnail_url_template = thumbnail_url_template.replace('{' + property + '}', extracted_value)
```

## Example

### Config:

```javascript
{
    // Youtube RegEx example
    'www.youtube.com': {
      tag: 'iframe',
      width: 560,
      height: 315,
      disabled: false,
      replace: [
        ['watch?v=', 'embed/'],
        ['http://', 'https://'],
      ],
      thumbnail: {
        format: 'http://img.youtube.com/vi/{id}/0.jpg',
        id: '.+/(.+)$'
      },
      removeAfter: '&'
    },
    // Youtube oEmbed example
    'youtu.be': {
      width: 560,
      height: 315,
      disabled: false,
      oembed: 'https://www.youtube.com/oembed'
    }
}
```

### Input:

```markdown
!(https://www.youtube.com/watch?v=8TQIvdFl4aU)
```

### Resulting Node

```javascript
{
    type: 'iframe',
    provider: 'www.youtube.com',
    data: {
        hName: 'iframe',
        hProperties: {
          src: 'https://www.youtube.com/embed/8TQIvdFl4aU',
          width: 560,
          height: 315,
          allowfullscreen: true,
          frameborder: '0'
        }
        thumbnail: 'https://image.youtube.com/8TQIvdFl4aU/0.jpg'
      }
}
```

### Resulting HTML

```html
<iframe src="https://www.youtube.com/embed/8TQIvdFl4aU" width="560" height="315"></iframe>
```

## License

[MIT][license] © [Zeste de Savoir][zds]

<!-- Definitions -->

[build-badge]: https://img.shields.io/travis/zestedesavoir/zmarkdown.svg

[build-status]: https://travis-ci.org/zestedesavoir/zmarkdown

[coverage-badge]: https://img.shields.io/coveralls/zestedesavoir/zmarkdown.svg

[coverage-status]: https://coveralls.io/github/zestedesavoir/zmarkdown

[license]: https://github.com/zestedesavoir/zmarkdown/blob/master/packages/remark-iframes/LICENSE-MIT

[zds]: https://zestedesavoir.com

[npm]: https://www.npmjs.com/package/remark-iframes

[rehype]: https://github.com/rehypejs/rehype

---
_Source: https://npm.io/package/remark-iframes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._