Integrate YouTube Api with website and creating a sample YouTube playlist with popup video player

Hi folks,
This post will give a guide on how to integrate YouTube Api with website and creating a sample YouTube playlist with popup video player.
Here is the sample look of the playlist. Check the sample code here

If you just want to embed YouTube videos, you can just simply uses the YouTube video link and embed to your site. But if you want to show more information about the video you are gonna show in your site (like title, likes, count and etc.) you need to use YouTube Api to get those information.

Here I’m going to user the latest YouTube Api version 3.0 and if you using the v2.0 you have to migrate to v3.0 since the v2.0 deprecated. Also v3.0 need Google Api key to process your requests. If you don’t have a google Api key, first get it from google console.

The below code works in the following order;

  1. Loop through the each videos and call the renderMovie(video) method.
  2. renderMovie(video) will call the Youtube Api to get the video information and pass the data to youtubeAPICallback(data).
  3. youtubeAPICallback() read the Api returned data and render/append html with those data.
  4. OnClick of each video the popup video player will be shown and setSelectedMovie() used to set the video into popup.

This Youtube Api link provide a great way to calculate your quota limit, also you can check the url that you need to call to get the desired data.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: