0

I'm working on React site for a musician, and I want to make a page that displays the Youtube videos of his music. He has created a playlist of videos he wants included. I can access the videos individually, but I want to set it up so that whatever videos he adds to that playlist will be accessed by the API and displayed on his site.

For individual videos I'm using Axios to get the videos from this url:

https://www.googleapis.com/youtube/v3/videos?part=snippet&id=<My ID>&key=<My Key>

Then in the render method, I deconstruct 'Videos' off of state, then I map over 'Videos', returning it in an iframe element like so:

<iframe src={https://www.youtube.com/embed/${videos.id}}></iframe>

I've been plyaing with the syntax of my GET url to try to get the playlist, currently I'm getting a status code of 400 on my GET, so I'll need to start at that point. This is what I have right now for URL to get the playlist:

axios.get('https://www.googleapis.com/youtube/v3/search?key=<My Key>&list=<Playlist ID>&part=snippet,id&order=date&maxResults=20')

Can someone give me an idea of how I'm going about this the wrong way?

mx0
  • 6,445
  • 12
  • 49
  • 54
Aaron
  • 49
  • 2
  • 8
  • FYI, in the urls I didn't leave the "key=" and "list=" empty, I just didn't want to post them publicly. – Aaron Jul 25 '18 at 17:25
  • When a Youtube playlist has more than 50 videos. Have a look at the following question regarding [retrieving all videos from a youtube playlist](https://stackoverflow.com/questions/18804904/retrieve-all-videos-from-youtube-playlist-using-youtube-v3-api?rq=1). You might have to do an additional check and API call to get the complete list. – Roy Scheffers Jul 25 '18 at 18:26

2 Answers2

2

Rather than playing with URL syntax, you can refer to the YouTube Data API docs to find different kinds of exposed data.

In your case, you're probably looking for managing PlaylistItems. More specifically, the list method:

Returns a collection of playlist items that match the API request parameters.

Here's an example that should get you the id and snippet information for each video in playlist of ID REPLACEWITHYOURID:

axios.get('https://www.googleapis.com/youtube/v3/playlistItems?playlistId=REPLACEWITHYOURID&part=snippet,id&maxResults=20')
Tadas Antanavicius
  • 4,882
  • 1
  • 20
  • 20
0

Try using the below API endpoint instead. This will return data about a playlist instead of a specific video.

https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=[playlist-id]&key=[your-key]

Use the above URL in your axios.get('') call. Replace [playlist-id] with the list ID of your client and [your-key] with your key.

NOTE: Also, make sure the YouTube API is enabled with the key that you use. You can check your settings here. If it's not enabled you'll get a 400 error message.

When you look at the data that is returned, look for {resourceId: { videoId: 34rewt6 }} Use that ID and paste it at the end of https://www.youtube.com/watch?v= This will be the direct link to the video.

To test the calls you make to APIs, have a look at Postman. It's a really neat tool to test and look at the data that's returned.

Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36