Gatsby-source-youtube NPM

gatsby-source-youtube is a Gatsby plugin to use Youtube as a data source.

Usage

Download gatsby-source-youtube from the NPM registry:

yarn add gatsby-source-youtube

Generate a OAuth 2.0 token

The package needs 3 .env variables with the following format to work:

GOOGLE_OAUTH_CLIENT_ID=2...m.apps.googleusercontent.com
GOOGLE_OAUTH_CLIENT_SECRET=Q...axL
YOUTUBE_TOKEN={"access_token":"ya...J0","refresh_token":"1..mE","scope":"https://www.googleapis.com/auth/youtube.readonly","token_type":"Bearer","expiry_date":1598284554759}

gatsby-source-youtube expose a script to make the generation easier.

Open a terminal at the root of your project and type:

gatsby-source-youtube-token

Add the plugin in your gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-youtube",
      options: {
        // All options are optional
        // By default, it will fetch videos from your playlists
        //
        // Comma-separated list of the YouTube channel ID(s)
        channelId: "AFD...dfgDF",
        // Comma-separated list of the YouTube playlist ID(s)
        playlistId: "AFD...dfgDF",
        // To update video:
        updateVideo: (video) => {
          const countryTag = video.tags.find((tag) => tag.startWith("country"))

          if (countryTag) {
            const [, country] = video.title.split(":")
            return {
              ...video,
              country,
            }
          }

          return video
        },
        // For a better stack trace and more information
        debug: true,
      },
    },
    // Recommanded to use with gatsby-image
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
  ],
}