Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-source-youtube-playlist

Gatsby plugin to retrieve YouTube playlist data from a YouTube channel using Channel id & YouTube Data API Key

How to install

    npm install --save gatsby-source-youtube-playlist

This plugin depends upon axios to fetch YouTube playlist data and gatsby-source-filesystem to create remote thumbnail image.

Example

Add in your gatsby-config.js

module.exports = {
  plugins: [
        {
            resolve: `gatsby-source-youtube-playlist`,
            options: {
                apiKey: 'YouTube_Data_API_KEY' ,
                channelId: 'YouTube_Channel_Id',
                maxResults: 20 // default is 5
            },
        },
    ],
}

guide to get YouTube Data API KEY

How to query

{
  allYouTubePlaylistItems {
    edges {
      node {
        channelTitle
        title
        desc
        playlistId
        publishDate
        thumbnails {
          default {
            url
          }
        }
        remoteImage {
          relativePath
          publicURL
        }
      }
    }
  }
}

Schema Descriptions

channelTitle: Title of YouTube Channel

title: Playlist title

desc: Playlist description

playlistId: id of the playlist. It can’t be used to fetch all videos from a playlist

publishDate: Playlist publish date

thumbnails: Contains information about thumbnails available on YouTube. It has sub fields default, medium, high, standard and they contain sub properties url,height,width.

remoteImage: It contains information about locally saved thumbnail image such as publicURL, extension, size, name, etc.

© 2024 Gatsby, Inc.