gatsby-remark-embedder
v7.0.0
Gatsby Remark plugin to embed well known services by their URL.
0/weekUpdated 2 years agoMITUnpacked: 65.9 KB
Published by Michaël De Boey
npm install gatsby-remark-embedder
gatsby-remark-embedder
Gatsby Remark plugin to embed well known services by their URL.
---
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[![All Contributors][all-contributors-badge]](#contributors-)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
The problem
Trying to embed well known services (like [CodePen][codepen],
[CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable], [Testing
Playground][testing-playground], [Twitch][twitch], [Twitter][twitter] or
[YouTube][youtube]) into your [Gatsby][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
gif/pen/pin/player/playground/post/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.
Table of Contents
- Installation
- Usage
- Supported services
- CodePen
- CodeSandbox
- GIPHY
- Instagram
- Lichess
- Pinterest
- Slides
- SoundCloud
- Spotify
- Streamable
- Testing Playground
- Twitch
- Twitter
- YouTube
- Options
- customTransformers
- services
- Inspiration
- Issues
- 🐛 Bugs
- 💡 Feature Requests
- Contributors ✨
- LICENSE
Installation
This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's dependencies:
``sh`
npm install gatsby-remark-embedder
or
`sh`
yarn add gatsby-remark-embedder
This library has a required peerDependencies listing for [gatsby][gatsby]gatsby-transformer-remark
and should be used as a plugin for
[][gatsby-transformer-remark] orgatsby-plugin-mdx
[][gatsby-plugin-mdx]. gatsby-plugin-instagram-embed
Depending on the services you want to embed, you should
also install [][gatsby-plugin-instagram-embed],gatsby-plugin-pinterest
[][gatsby-plugin-pinterest] and/orgatsby-plugin-twitter
[][gatsby-plugin-twitter].
Usage
`js
// In your gatsby-config.js
module.exports = {
// Find the 'plugins' array
plugins: [
{
resolve: gatsby-transformer-remark,gatsby-remark-embedder
options: {
plugins: [
{
resolve: ,
options: {
customTransformers: [
// Your custom transformers
],
services: {
// The service-specific options by the name of the service
},
},
},
// Other plugins here...
],
},
},
],
};
`
or
`js
// In your gatsby-config.js
module.exports = {
// Find the 'plugins' array
plugins: [
{
resolve: gatsby-plugin-mdx,gatsby-remark-embedder
options: {
gatsbyRemarkPlugins: [
{
resolve: ,
options: {
customTransformers: [
// Your custom transformers
],
services: {
// The service-specific options by the name of the service
},
},
},
// Other plugins here...
],
},
},
],
};
`
Supported services
$3
#### Usage
`md`
https://codepen.io/team/codepen/pen/PNaGbb
Result
`html`
style="width:100%; height:300px;"
>
$3
#### Usage
`md`
https://codesandbox.io/s/ynn88nx9x?view=split
Result
`html`
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"
>
$3
#### Usage
`md`
https://giphy.com/gifs/howtogiphygifs-how-to-XatG8bioEwwVO
Result
`html`
width="100%"
height="100%"
style="position:absolute"
frameborder="0"
class="giphy-embed"
allowfullscreen
>
$3
The returned HTML snippet from the Instagram transformer will only be
automatically recognized as an embedded post when Instagram's embed JavaScript
is included on the page.
Since the Instagram 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-instagram-embed][gatsby-plugin-instagram-embed].
#### Usage
`md`
https://instagram.com/p/B60jPE6J8U-
Result
`html
data-instgrm-captioned
data-instgrm-permalink="https://www.instagram.com/p/B60jPE6J8U-/?utm_source=ig_embed&utm_campaign=loading"
data-instgrm-version="12"
style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"
>
style="background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;"
target="_blank"
>
>
>
>
>
height="50px"
viewBox="0 0 60 60"
version="1.1"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink"
>
>
>
View this post on Instagram
>
>
>
>
