Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-remark-embed-video with all npm packages installed. Try it out:

var gatsbyRemarkEmbedVideo = require("gatsby-remark-embed-video")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-remark-embed-video v2.0.1

Embed Videos (Youtube, Vimeo, VideoPress) in Gatsby via Markdown


Embed a Youtube Video in your Markdown

Inspired by gatsby-remark-embed-youtube


  1. Install plugin to your site:
npm i gatsby-remark-embed-video

yarn add gatsby-remark-embed-video
  1. Add following to your gatsby-config.js:
    plugins: [
        resolve: "gatsby-transformer-remark",
        options: {
          plugins: [
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 800,
              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
              height: 400, // Optional: Overrides optional.ratio
              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
              noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
              urlOverrides: [
                  id: 'youtube',
                  embedURL: (videoId) => `${videoId}`,
              ] //Optional: Override URL of a service provider, e.g to enable youtube-nocookie support

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

plugins: [

Note: you can style the videoIframe using .embedVideoIframe

  1. Restart gatsby.


# Look at this Video:

`youtube: 2Xc9gXyf2G4`

`vimeo: 5299404`

`videoPress: kUJmAcSf`

`twitch: 273436948`
`twitchLive: dakotaz`



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free