Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @raae/gatsby-remark-oembed with all npm packages installed. Try it out:

var gatsbyRemarkOembed = require("@raae/gatsby-remark-oembed")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@raae/gatsby-remark-oembed v0.0.7

> A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.

Gatsby Remark Oembed Plugin

This GatsbyJS Remark Sub-Plugin transforms oembed links (Twitter, Instagram, YouTube, Vimeo, SoundCloud, CodePen etc.) into its corresponding embed code.

This is an early version of the plugin. Let me know if you have problems or questions by submitting an issue.

Install

npm install @raae/gatsby-remark-oembed

Requirements

  • Node version 8 and up.
  • Gatsby version >=2.0.88
  • Gatsby Transformer Remark Plugin >=2.0.0

Oembed support

Under the hood the oembed provider list from oembed.com is used.

So far these providers are confirmed to be working: CodePen, Flickr, Instagram, Reddit, Twitch, Twitter, Vimeo, YouTube, SoundCloud.

Twitter, Flickr, Instagram and Reddit requires external javascript to be added to every page. So make sure to exclude the ones you do not need.

Example site

Check out gatsby-remark-oembed.netlify.com/. Its source code can be found on Github.

How to use

Configuration

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `@raae/gatsby-remark-oembed`,
          options: {
            // defaults to false
            usePrefix: true,
            providers: {
              // Important to exclude providers
              // that adds js to the page.
              // If you do not need them.
              exclude: ["Reddit"]
            }
          }
        }
      ]
    }
  }
];

Optional settings for providers

Many oEmbed providers offer additional options for configure the display of the embed.

For example, for Instagram see Instagram – Embedding for Developers, which describes the additional oEmbed parameters you might want to change for the embed.

// …
{
  resolve: `@raae/gatsby-remark-oembed`,
  options: {
    usePrefix: true,
    providers: {
      include: [
        'Twitter',
        'Instagram',
      ]
      settings: {
        // Ex. Show all Twitter embeds with the dark theme
        Twitter: { theme: 'dark' },
        // Ex. Hide all Instagram comments by default
        Instagram: { hidecaption: true },
      },
    },
  },
}

Content

With setting usePrefix: true

// In your markdown file

Check it out! I can use oembed links in my markdown.

`oembed: https://twitter.com/raae/status/1045394833001652225`

Its pretty cool :D

`oembed: https://www.instagram.com/p/Bof9WhgBmY2/`

Links must be surrounded by empty lines.

With setting usePrefix: false

// In your markdown file

Check it out! I can use oembed links in my markdown.

https://twitter.com/raae/status/1045394833001652225

Its pretty cool :D

https://www.instagram.com/p/Bof9WhgBmY2/

Links must be surrounded by empty lines.

Options

NameTypeDescription
usePrefixBooleanSee above section on content
providers.includeArray of provider keysOnly links from providers on this list will be transformed.
providers.excludeArray of provider keysLinks from providers on this list will not be transformed.
providers.settingsObject of provider settingsOptional configuration unique to each provider.

Release routines

Make sure you have checked out and updated master.

Buy me a coffee?

It will encourage me to keep it going, fix whatever bugs you find and spend time making it better :D

ko-fi

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free