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.
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.
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
.
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-embedder`],
},
},
];
https://codepen.io/team/codepen/pen/PNaGbb
<iframe
src="https://codepen.io/team/codepen/embed/preview/PNaGbb"
style="width:100%; height:300px;"
></iframe>
https://codesandbox.io/s/ynn88nx9x?view=split
<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>
https://slides.com/kentcdodds/oss-we-want
<iframe
src="https://slides.com/kentcdodds/oss-we-want/embed"
width="576"
height="420"
scrolling="no"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
https://soundcloud.com/clemenswenners/africa
<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>
https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
<iframe
src="https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L"
width="100%"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
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
.
https://twitter.com/MichaelDeBoey93/status/1152991421789548546
<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>
& <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>
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
)
https://youtu.be/dQw4w9WgXcQ
<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>
This whole library was extracted out of Kent C. Dodds' personal website.
The intention is to make this available to be used independently.
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a π. This helps maintainers prioritize what to work on.
Thanks goes to these people (emoji key):
Kent C. Dodds π» π π€ π |
MichaΓ«l De Boey π π» π |
Kornel Dubieniecki π |
Nick Nish π» |
Caneco π¨ |
Anurag Hazra π π» |
Yash Joshi π» |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT