This plugin parses custom Markdown syntax to create iframes.

This creates a new MDAST element called "iframe"

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

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.

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

npm:

npm install remark-iframes

Dependencies:

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:

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)

• 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.

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.

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)

{
    // 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'
    }
}

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

{
    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'
      }
}

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

MIT © Zeste de Savoir