Gatsby.js — Videos

Photo by Thomas William on Unsplash

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