Join the Webstudio community

Updated 2 months ago

Youtube API playlist and detail page [shared trick]

At a glance
Yesterday got a playlist up to 50 videos straight from Youtube to Webstudio. It's pretty awesome, you can get the thumbnail, title, descriptions (without link formatting), view count, amount of likes on each video

Need to activate in console.google.com the youtube data api v3, then copy that key and use it in this curl command as your webstudio resource:
Plain Text
 webstudio resource: youtube playlist
curl "https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=100&order=date&playlistId=PLk9V6QZq6ese4YTC0sBYx4MPCawC51ZGX&key=[APIKEY]" \ --request get \ --header "Accept: application/json"

Then you might only need to change the playlistId with your own.


To get a detail page of each Youtube video, create the :slug in the new webstudio page and use the following resource:
Plain Text
`https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&id=${system.params.slug}&key=[APIKEY]`


Keep in mind that Youtube has API limitations, the max daily limit is 10.000 calls.

I'm still experimenting with it, but I thought let's at least share some progress so that others don't need to get through the same struggles than me looking for unnessary oauth access keys.

Now when I publish a new video, I can add it to my hidden webstudio playlist and it will appear live in sync on my website 😎 😁
Attachments
image.png
image.png
K
M
2 comments
Please let us know when / if you have an explainer video out about this. Love your channel and the explanations!
yeah we need this
Add a reply
Sign up and join the conversation on Discord