gatsby-remark-embed-video

Embed a Youtube Video in your Markdown

Usage

1# Look at this Video:
2
3`video: https://www.youtube.com/embed/2Xc9gXyf2G4`
4`youtube: https://www.youtube.com/watch?v=2Xc9gXyf2G4`
5`youtube: 2Xc9gXyf2G4`
6
7`vimeo: https://vimeo.com/5299404`
8`vimeo: 5299404`
9
10`videoPress: https://videopress.com/v/kUJmAcSf`
11`videoPress: kUJmAcSf`
12
13`twitch: https://player.twitch.tv/?channel=dakotaz`
14`twitch: https://player.twitch.tv/?autoplay=false&video=v273436948`
15`twitch: 273436948`
16`twitchLive: dakotaz`

Additional Features

Add Custom CSS Styling

You can style the videoIframe using .embedVideo-container or by specifying a custom class

1. Restart gatsby.

A11y support

video: [VideoTitle](https://www.youtube.com/embed/2Xc9gXyf2G4) youtube: [Cool Youtube Video](https://www.youtube.com/watch?v=2Xc9gXyf2G4)

Install

1npm i gatsby-remark-embed-video
2
3yarn add gatsby-remark-embed-video

Configuration Markdown with MDX

Example Configuration

1import type { GatsbyConfig } from "gatsby";
2
3const config: GatsbyConfig = {
4  siteMetadata: {
5    title: `My Gatsby Site`,
6    siteUrl: `https://www.yourdomain.tld`,
7  },
8  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
9  // If you use VSCode you can also use the GraphQL plugin
10  // Learn more at: https://gatsby.dev/graphql-typegen
11  graphqlTypegen: true,
12  plugins: [
13    "gatsby-plugin-react-helmet",
14    "gatsby-plugin-sitemap",
15    {
16      resolve: "gatsby-plugin-mdx",
17      options: {
18        gatsbyRemarkPlugins: [
19          {
20            resolve: "gatsby-remark-embed-video",
21            options: {
22              width: 800,
23              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
24              height: 400, // Optional: Overrides optional.ratio
25              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
26              noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
27              loadingStrategy: "lazy", //Optional: Enable support for lazy-load offscreen iframes. Default is disabled.
28              urlOverrides: [
29                {
30                  id: "youtube",
31                  embedURL: (videoId: string) =>
32                    `https://www.youtube-nocookie.com/embed/${videoId}`,
33                },
34              ], //Optional: Override URL of a service provider, e.g to enable youtube-nocookie support
35              containerClass: "embedVideo-container", //Optional: Custom CSS class for iframe container, for multiple classes separate them by space
36              iframeId: false, //Optional: if true, iframe's id will be set to what is provided after 'video:' (YouTube IFrame player API requires iframe id)
37              sandbox: 'allow-same-origin allow-scripts allow-presentation', // Optional: iframe sandbox options - Default: undefined
38            },
39          },
40           "gatsby-remark-responsive-iframe", //Optional: Must be loaded after gatsby-remark-embed-video
41        ],
42      },
43    },
44    {
45      resolve: "gatsby-plugin-manifest",
46      options: {
47        icon: "src/images/icon.png",
48      },
49    },
50
51    {
52      resolve: "gatsby-source-filesystem",
53      options: {
54        name: "pages",
55        path: "./src/pages/",
56      },
57      __key: "pages",
58    },
59  ],
60};
61
62export default config;

Configuration Markdown (without MDX)

1. Add following to your gatsby-config.js:

1module.exports = {
2  plugins: [
3    {
4      resolve: "gatsby-transformer-remark",
5      options: {
6        plugins: [
7          {
8            resolve: "gatsby-remark-embed-video",
9            options: {
10              width: 800,
11              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
12              height: 400, // Optional: Overrides optional.ratio
13              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
14              noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
15              loadingStrategy: 'lazy', //Optional: Enable support for lazy-load offscreen iframes. Default is disabled.
16              urlOverrides: [
17                {
18                  id: "youtube",
19                  embedURL: videoId =>
20                    `https://www.youtube-nocookie.com/embed/${videoId}`,
21                },
22              ], //Optional: Override URL of a service provider, e.g to enable youtube-nocookie support
23              containerClass: "embedVideo-container", //Optional: Custom CSS class for iframe container, for multiple classes separate them by space
24              iframeId: false, //Optional: if true, iframe's id will be set to what is provided after 'video:' (YouTube IFrame player API requires iframe id)
25            },
26             "gatsby-remark-responsive-iframe", //Optional: Must be loaded after gatsby-remark-embed-video
27          },
28        ],
29      },
30    },
31  ],
32};

Make the iFrame Responsive

I would recommend the plugin gatsby-remark-responsive-iframe

Install it with npm i gatsby-remark-responsive-iframe

When using this plugin you must ensure that in the sequence of plugins gatsby-remark-embed-video runs before gatsby-remark-responsive-iframe.

Troubleshooting

if you also rely on gatsby-remark-responsive-iframe, gatsby-remark-images, or gatsby-remark-prismjs, you have to define the embed-youtube plugin first:

1plugins: [
2  "gatsby-remark-embed-video",
3  "gatsby-remark-responsive-iframe",
4  "gatsby-remark-prismjs",
5  "gatsby-remark-images"
6]

Special Thanks

Inspired by gatsby-remark-embed-youtube

License

MIT