Gatsby.js — Videos

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Working with Videos

We can create our own Video component to add embedded videos.

For example, wen can write:

import React from "react"

const Video = ({ videoSrcURL, videoTitle, ...props }) => (
  <div className="video">
    <iframe
      src={videoSrcURL}
      title={videoTitle}
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      frameBorder="0"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      allowFullScreen
    />
  </div>
)

const IndexPage = () => {
  return (
    <div>
      <Video
        videoSrcURL="https://www.youtube.com/embed/Kxw2OjX0B10"
        videoTitle="Some Video"
      />
    </div >
  )
}
export default IndexPage

to add the Video component.

It renders an iframe with the embedded video.

Then in IndexPage , we set the videoSrcURL and render it.

Querying Video Data from Markdown with GraphQL

Gatsby can get a video’s URL from a Markdown file.

For example, we can write:

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/content`,
      },
    },
  ],
}

gatsby-node.js

const path = require(`path`)
exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions
  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)
  if (result.errors) {
    console.error(result.errors)
  }
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: path.resolve(`src/templates/post.js`),
    })
  })
}

src/templates/post.js

import React from "react"
import { graphql } from "gatsby"

const Video = ({ videoSrcURL, videoTitle, ...props }) => (
  <div className="video">
    <iframe
      src={videoSrcURL}
      title={videoTitle}
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      frameBorder="0"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      allowFullScreen
    />
  </div>
)

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
        videoSourceURL
        videoTitle
      }
    }
  }
`

export default function VlogTemplate({
  data,
}) {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <Video
          videoSrcURL={frontmatter.videoSourceURL}
          videoTitle={frontmatter.videoTitle}
        />
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  )
}

src/content/post.md

---
path: "/my-first-post"
date: "2020-03-27"
title: "My first blog post"
videoSourceURL: https://www.youtube.com/embed/Kxw2OjX0B10
videoTitle: "Some video"
---

hello world

In gatsby-config.js , we add the gatsby-transformer-remark and gatsby-source-filesystem plugins to read Markdown files.

Then in gatsby-node.js , we have the createPages function make a GraphQL query for the Markdown and then call createPage to create the posts from the post.js template.

The path property has the path to the post.

In src/templates/post.js , we add the VlogTemplate template to render the Markdown file.

We make the query with the pageQuery variable.

Then we get the returned data in the data prop of VlogTemplate .

And we render the front matter values that are in the frontmatter property.

html has the content.

The Video component is the one that we used before.

Now we should see the YouTube video rendered.

Conclusion

We can render videos directly with the URL or a video URL in Markdown front matter.