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.

npm install @raae/gatsby-remark-oembed

or

yarn add @raae/gatsby-remark-oembed

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

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

Warning: The Instagram oEmbed API requires an access token. You'll need a Facebook Developer account, a Facebook App, and an App Access Token. More information here, or take a look at this tutorial for setting it all up in Gatsby with Environment Variables.

Update: Twitch removed oEmbed support in 2020 when deprecating their v5 API. It seems they are not planning to support oEmbed again. Unfortunately this means Twitch urls are no longer being transformed. Let them know how you feel about this on their forum.

Check out gatsby-remark-oembed.netlify.com/. Its source code can be found in gatsby-remark-oembed-example-site.

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

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

For example, for Twitter see Embedded Tweet parameter reference, 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, and disables ad tracking
        Twitter: {
          theme: 'dark',
          dnt: true
        },
        // Ex. Hide all Instagram comments by default, and
        // add a facebook access token
        Instagram: {
           hidecaption: true,
           access_token: 'a-facebook-access-token'
        },
      },
    },
  },
}

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

If you would like to use a prefix other than "oembed" or multiple prefixes you can set usePrefix to an array of custom prefixes. This can be beneficial when converting from other embed plugins.

usePrefix: ["embed", "video", "oembed"]

// In your markdown file

Check it out! I can use the prefix "oembed:"

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

Or I can use the prefix "embed:" if I like ;)

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

I can also use "video:" like I did before with `gatsby-remark-video`.

`video: https://vimeo.com/42672205`

usePrefix: true in the section above is the same as usePrefix: ["oembed"].

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

This is a monorepo consisting of the plugin, and two example sites:

• /gatsby-remark-oembed-md-site - the markdown example site
• /gatsby-remark-oembed-mdx-site - the mdx example site

And the plugin /gatsby-remark-oembed.

By running yarn dev in the monorepo root you will spin up both sites.

• /gatsby-remark-oembed-md-site on localhost:8000
• /gatsby-remark-oembed-mdx-site on localhost:8080

Make sure you have checked out and updated master.

Change directory to gatsby-remark-oembed.

• Run yarn version patch|minor|major
• Run yarn publish
• Create a release on Github.

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