Morioh
Login
Zara Bryant

Zara Bryant

5 years ago

3 Steps to Embed Videos in Gatsby Sites

After blogging for more than a decade, I have realized that a blog post is kinda incomplete without some visual treat. The process of adding images is more or less the same. However, videos and GIFs are one level up which is rendered/embedded differently in various web applications, and the embedding process may vary from one framework to another.

Table of Contents

  • Using Plugin: gatsby-remark-embed-video
  • Step #0: Basic Gatsby Setup
  • Step #1: gatsby-remark-embed-video Installation
  • Step #2: Working
  • Step #3: Plugin Usage
  • Working Example!
  • Conclusion

JAMstack (JavaScript APIs Markup) is pretty much the hot topic, and that’s why we’ve seen stupendous growth in Gatsby powered websites. Considering the growing popularity of JAMstack sites, I’ve decided to write about how you can embed videos in markdown with Gatsby.js.

Coding in markdown brings so much ease and when I tried looking for ways to embed videos in Gatsby.js through markdown pages, I couldn’t find a reasonable solution other than coding the functionality from the scratch.

Using Plugin: gatsby-remark-embed-video

One big plus of using Gatsby is that you find a growing collection of plugins which implement Gatsby API through simple NPM packages. If you visit the Gatsby plugin library and type the keywords around embed videos, you’ll find multiple results.

Instead, I ask you to try some of these and find a suitable match I’ve decided to make your job easy. So, after trying a couple of awesome video embedding plugins I’ve managed to find the best solution for you. The plugin is called the gatsby-remark-embed-video, and it is one of the most intuitive plugins which you find in this particular niche. And I am so glad to tell that the plugin met my development needs to the fullest.

So, let’s not waste time and jump straight away to the procedure of how this plugin works!

Step #0: Basic Gatsby Setup

The first step is that you must have a demo Gatsby site up and running. If you are an absolute beginner, I’d recommend you to begin with the gatsby-starter-blog theme. It showcases the most basic representation of a Gatsby site which is the perfect requirement for any beginner to get started.

Step #1: gatsby-remark-embed-video Installation

To install the plugin, type the following command in the root folder of your site and hit Enter.

  • For npm use:
npm i gatsby-remark-embed-video
  • For yarn use:
yarn add gatsby-remark-embed-video

I am going to install via npm so, I am uploading a GIF of this process.

Step #2: Working

Next, add gatsby-remark-embed-video plugin to the gatsby-config.js file to make it work. In this file, you’ll find all the site configuration options which are placed in the root folder.

One of these configuration options is for plugins. Here, you find a plugins array which implements Gatsby APIs. Like most of the Gatsby plugins, gatsby-remark-embed-video also supports advanced options which I am going to explain now.

module.exports = {
  siteMetadata: {
    title: 'Your Site Title',
    siteUrl: 'https://yoursite.com',
  },
    plugins: [     {
        resolve: "gatsby-remark-embed-video",
        options: {
            width: 800,
            ratio: 1.77, 
            height: 400, 
            related: false,
            noIframeBorder: true
        },
    },
    ],
}
  • width: Defines the width of your video.
  • ratio: (Optional) It is the all-famous 16:9 factor which when divided makes ‘1.77’ as a default setting.
  • height: (Optional) It is defined if you want to override the default ratio option explained above.
  • related: (Optional) If used, then it will remove all the related videos from the end of an embedded YouTube video.
  • noIframeBorder: (Optional) Sets the border style to 0.

Moreover, the plugin is designed to embed videos in markdown which means it requires some pre-requisite plugins as well i.e.,

  • gatsby-remark-responsive-iframe: Make iframes in markdown which is processed by remark responsive.
  • gatsby-transformer-remark: Parses markdown files using remark.
  • gatsby-remark-images: Processes images in markdown so they can be used in the production build.

All the aforementioned plugins will support gatsby-remark-embed-video to render videos in markdown. Also, there are some important conditions which you have to ensure while using this plugin, i.e.

If your site is using the gatsby-remark-responsive-iframe plugin, you have to ensure that the gatsby-remark-embed-video is defined first like this:

Step #3: Plugin Usage

The gatsby-remark-embed-video plugin is used to embed videos from multiple video streaming platforms like YouTube, Vimeo, Twitch, etc. In each case of these cases, you can embed the video by typing the following in your markdown file.

video: https://www.youtube.com/embed/2Xc9gXyf2G4 youtube: https://www.youtube.com/watch?v=2Xc9gXyf2G4 youtube: 2Xc9gXyf2G4

vimeo: https://vimeo.com/5299404 vimeo: 5299404

videoPress: https://videopress.com/v/kUJmAcSf 

videoPress: kUJmAcSf

twitch: https://player.twitch.tv/?channel=dakotaz twitch: https://player.twitch.tv/?autoplay=false&video=v273436948 twitch: 273436948 twitchLive: dakotaz

The above code snippet tells that the process is pretty simple. Either of these two formats can embed the videos:

  1. Through complete web URLs
  2. Through video IDs

And each video source is prepended by the name of the video host i.e., YouTube, Vimeo, etc. For example, the video URL “https://www.youtube.com/watch?v=nG5TXyyaeDs” will be defined in the following two ways:

 <!-- #1: Embed through web URL -->
`youtube:https://www.youtube.com/watch?v=nG5TXyyaeDs`

 <!-- #2: Embed through video ID -->
`youtube:nG5TXyyaeDs`

Note that in each case, the type of video host is quite evident, i.e. YouTube. So, by following this format, you can embed as many videos from multiple video hosts.

Working Example!

Let’s quickly jump on to a practical example where I am going to show you how to use this plugin. Like I have mentioned before I am using the gatsby-starter-blog theme for this article so, I’ll be working in its gatsby-config.js file.

Here’s the code where I’ve used the gatsby-remark-embed-video plugin.

plugins: [
{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            // Using gatsby-remark-embed-video before gatsby-remark-images & gatsby-remark-responsive-iframe plugins.             resolve: `gatsby-remark-embed-video`,             options: {
              maxWidth: 800,
              ratio: 1.77,
              height: 400,
              related: false,
              noIframerder: true,
            },
          },
          {
            resolve: `gatsby-remark-images`,             options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          ],
      },
},
]

See how I have used gatsby-remark-embed-video plugin before gatsby-remark-images & gatsby-remark-responsive-iframe plugins since it is the requirement.

Let’s also see how to embed in a markdown file.

Save this file and preview the result on the front-end like this:

Conclusion

Woot! Woot! Only three steps and embed as many videos as you want in your Gatsby sites. I even tried coding this functionality myself. But the easiest method of embedding video in a Gatsby site is to source it from sites like YouTube, Vimeo, or Twitch. It not only prevents you from writing lengthy code blocks but also saves time.

Like I mentioned at the start of this article that there are several other Gatsby plugins which work great with Markdown posts and pages. But I’d definitely recommend you trying out the gatsby-remark-embed-video plugin. Finally, don’t forget to post your feedback in the comments section below.

#web-development #javascript #video

3 Steps to Embed Videos in Gatsby Sites
14.00 GEEK