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.
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.
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!
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.
To install the plugin, type the following command in the root folder of your site and hit Enter.
npm
use:npm i gatsby-remark-embed-video
yarn
use:yarn add gatsby-remark-embed-video
I am going to install via npm
so, I am uploading a GIF of this process.
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:
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:
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.
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:
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