gatsby-remark-embedder

Gatsby Remark plugin to embed well known services by their URL.

The problem

Trying to embed well known services (like CodePen, CodeSandbox, Slides, SoundCloud, Spotify, Twitter or YouTube) into your Gatsby website can be hard, since you have to know how this needs to be done for all of these different services.

This solution

gatsby-remark-embedder tries to solve this problem for you by letting you just copy-paste the link to the pen/player/sandbox/tweet/video you want to embed right from within your browser onto a separate line (surrounded by empty lines) and replace it with the proper embed-code.

Installation
Usage
Supported services
- CodePen
- CodeSandbox
- Slides
- SoundCloud
- Spotify
- Twitter
- YouTube
Inspiration
Issues
- 🐛 Bugs
- 💡 Feature Requests
Contributors
LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save gatsby-remark-embedder

This library has peerDependencies listings for gatsby.

Usage

// In your gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-embedder`],
    },
  },
];

Supported services

CodePen

Usage

https://codepen.io/team/codepen/pen/PNaGbb

Result

<iframe
  src="https://codepen.io/team/codepen/embed/preview/PNaGbb"
  style="width:100%; height:300px;"
></iframe>

CodeSandbox

Usage

https://codesandbox.io/s/ynn88nx9x?view=split

Result

<iframe
  src="https://codesandbox.io/embed/ynn88nx9x?view=split"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

Slides

Usage

https://slides.com/kentcdodds/oss-we-want

Result

<iframe
  src="https://slides.com/kentcdodds/oss-we-want/embed"
  width="576"
  height="420"
  scrolling="no"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen
></iframe>

SoundCloud

Usage

https://soundcloud.com/clemenswenners/africa

Result

<iframe
  width="100%"
  height="300"
  scrolling="no"
  frameborder="no"
  src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true
></iframe>

Spotify

Usage

https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L

Result

<iframe
  src="https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L"
  width="100%"
  height="380"
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
></iframe>

Twitter

The returned HTML snippet from the Twitter transformer will only be automatically recognized as an Embedded Tweet when Twitter's widget JavaScript is included on the page.
Since the Twitter transformer doesn't include this JavaScript (because we don't want to include it multiple times on a page when having multiple embeds), you have to include it yourself. The recommended way of including it is by using gatsby-plugin-twitter.

Usage

https://twitter.com/MichaelDeBoey93/status/1152991421789548546

Result

<blockquote class="twitter-tweet" data-dnt="true">
  <p lang="en" dir="ltr" class="css-yw8fqx e11rucy10">
    Happy to announce I just published the first gatsby-remark-embedder 🎉🎉🎉
    <br />
    <br />
    This first version is an extract of
    <a href="https://twitter.com/kentcdodds">@kentcdodds</a>' personal website
    remark-embedder plugin, but I'm planning on adding extra services then
    <a href="https://twitter.com/codesandbox">@codesandbox</a>,<a
      href="https://twitter.com/Twitter"
    >
      @Twitter
    </a>
    &amp; <a href="https://twitter.com/YouTube">@YouTube</a> too.
    <a href="https://t.co/M4PA9aFZdG">https://t.co/M4PA9aFZdG</a>
  </p>
  — Michaël De Boey (@MichaelDeBoey93)
  <a href="https://twitter.com/MichaelDeBoey93/status/1152991421789548546">
    July 21, 2019
  </a>
</blockquote>

YouTube

The YouTube transformer (currently) only supports videos in the following formats:

Full url (https://youtube.com/watch?v=dQw4w9WgXcQ)
Short url (https://youtu.be/dQw4w9WgXcQ)

Usage

https://youtu.be/dQw4w9WgXcQ

Result

<iframe
  width="100%"
  height="315"
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>