Join the Webstudio community

Updated 3 weeks ago

Youtube API playlist and detail page [shared trick]

At a glance

The community member has set up a playlist of 50 YouTube videos in Webstudio, which allows them to access the thumbnail, title, description, view count, and likes for each video. To do this, they need to activate the YouTube Data API v3 in the Google Console and use the API key in a curl command to fetch the playlist items. They also provide a way to fetch details for individual videos using the video ID. The community member notes that YouTube has API usage limits, and they are still experimenting with this setup. The comments express interest in the community member providing an explainer video about this process.

Useful resources
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
1
K
M
J
5 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
hi, have you tried to do this with the youtube component yet?
this is awesome, I dind't know this
i figured it out, its not same like you did but this shows all uploaded videos on a single embed.

refered from this youtube video i found online -

so in youtube component yu can add the url as - https://youtube.com/embed?listType=playlist&list= as placeholder

and in list type
tick playlist then add the list id as your channel url but change the 2nd character to "U" instead of "C"
For example - my channel url is - "UCdZBnUb7m8Pd_wUTDNqUu3Q" so it will be "UUdZBnUb7m8Pd_wUTDNqUu3Q"

so the Youtube component adds max up to 200 videos. so both livestreams,videos & shorts all together.

if html component - it would be like <iframe>src="https://youtube.com/embed?listType=playlist&list=UUjk2nKmHzgH5Xy-C5qYRd5A"</iframe> ( replace it to your channel id)

yu can use this site to get channel id -

i couldnt get list type - user-uploads to work if anyone got it working do share your method as well. so it helps others who wants these
Add a reply
Sign up and join the conversation on Discord