We are adding support for Nextjs. Get in touch on Twitter to learn more.

Configuration

Configure your videos using theme options.

The @reflexjs/gatsby-theme-video package accepts the following options to make it easy to customize your videos.

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Reflex",
    description: "Starter for Reflex.",
    siteUrl: process.env.SITE_URL || "http://localhost:8000",
  },
  plugins: [
    "@reflexjs/gatsby-theme-base"
    {
      resolve: `@reflexjs/gatsby-theme-video`,
      options: {
        contentPath: "content/videos",
        basePath: "/videos",
        videosPerPage: 10,
        pageQuery: null,
        slugResolver: null,
        providers: []
      }
    }
  ],
}

contentPath

Update the contentPath if you need to place your videos in a different location (defaults to /content/videos).

basePath

The basePath sets the path for the videos landing page, the tags pages and the video pages. All video pages are prefixed by the basePath.

See slugResolver if you need more flexibility.

videosPerPage

The number of videos to use to paginate videos pages.

pageQuery

The GraphQL query to use to create the /videos page. You can use this option to filter out or customize the videos that are displayed on the page.

Example:

Filter out all unpublished videos tagged with Example.

pageQuery: `
  query {
    allVideo(sort: {fields: date, order: DESC}, filter: { published: { eq: false } }) {
      nodes {
        id
        slug
      }
    }
  }
`,
},

slugResolver

Use the slugResolver option to have more flexibility on how video slugs are created.

Example:

This will remove the /videos prefix and add a .html suffix to all video slugs.

gatsby-config.js

const { toSlug } = require("@reflexjs/gatsby-helpers") 
module.exports = {
  plugins: [
    `@reflexjs/gatsby-theme-base`,
    {
      resolve: `@reflexjs/gatsby-theme-video`,
      options: {
        slugResolver: (node, parent, basePath) =>
          `${toSlug(node.frontmatter.title)}.html`,
      },
    },
  ],
}

providers

Use the providers options to define additional video providers. Youtube and Vimeo are supported by the package.

module.exports = {
  plugins: [
    `@reflexjs/gatsby-theme-base`,
    {
      resolve: `@reflexjs/gatsby-theme-video`,
      options: {
        providers: [
          {
            name: "youtube",
            // Returns the embed url.
            embedUrl: ({ videoId }) =>
              `https://www.youtube.com/embed/${videoId}`,
            // Callback to retrieve the video id from the url.
            videoId: ({ url }) =>
              url
                .match(
                  /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/i
                )
                ?.pop(),
          },
        ],
      },
    },
  ],
}

Video Add a video