A simple video gallery with youtube API

Anjula Shanaka
Nerd For Tech
Published in
2 min readApr 20, 2020

So we are going to create a video gallery it’s very easy if you have worked with API’s before. but don’t worry if you haven’t. Here’s how it’s going to look like in the end.

Videos are loaded from YouTube to a card

First of all, we have to understand how it’s going to work.

We will create a wrapper using spring boot to get the details of the particular youtube playlist using the API. To get the details of the playlist as a payload we’ll generate a url using google API’s. The url looks like this,

https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=" + youtubePlaylistId + “&key=” + googleApiKey

All you have to add the playlist id and the google api key to the url. Once it has done you can start coding the wrapper. Here’s the one I wrote.

According to this, we can send how many items we need per payload using req parameters and there’s a next page token it contains for the next payload so we need to send it also using req parameters to load next payload.

Once the wrapper created we have to write a js function using jquery to loop through each item. This is the function I wrote to loop through these items.

So as the last step of the video gallery we need to render it to the page. We need to create a template using mustache to render it. This is the one I created for the page. You can have a simple idea from this.

Now it loads the content to the page. So that’s a basic video gallery and you can have a rough idea with this. That’s it for today. See you guy’s in the next.

--

--

Anjula Shanaka
Nerd For Tech

GSoC ’22 @openMRS | CTO @SEF | Developer @promiseQ | Undergraduate @USJ