gatsby-remark-embedder

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

public

Forked

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>