YouTube is the most popular video source for world wide web users. As a developer, if you would like to embed a YouTube application in your website or application, there are a number of tools available. However, there are some settings and customization required if you want to modify according to your requirements. Here are my insights.
YouTube API
To incorporate YouTube API into your website you will first need a security key or API Code. You can create one for your project by creating a google account if you don’t already have one.
- After logging in to the Google Developers Console, create a new Project by giving title and description
- Add corresponding API’s to your project by selecting YouTube Data API’s to start with
- Create a security key for your project using the left menu for the domain
- You can also create a OAuth key if required and add the domain and referrers
Connecting to YouTube
On the Google Developers YouTube page, there are scripts available in different programming languages such as Java, JavaScript, PHP, Python, and so on. You can follow the guidelines there to create the pages. If you are using JavaScript, you can create separate java script files and html file as given. However, you can include everything in one html page separating the scripts.
In the code replace the existing sample text with your security key that you generated earlier. Try running the code in a browser and everything must work fine. However, the console may show certain errors such as ‘cannot find property of undefined’ and so on. Start debugging the code and see where the error is occurring.
In most cases, the security key is incorrect or if you are trying to connect from a http to https websites. In other cases, the errors pop up due to the x-frame origin set to the sameorigin. If you check the response of the gapi, you can see the json response and all the resulting video lists.
Search.List
YouTube API has a function search.list which is used to search the youtube videos and get a response. You need to specify a search string and return type. Also, the maxResults or safeSearch options can be set based on your preferences.
Once you get the response json, the next step is to embed the video code of each video in to the iframe player on your html. You can use a player for web,ios, or andriod applications based on your device. Create an id to the iframe and set the source of the iframe to the youtube video code onclick of the video title. You can have a function to append code to the source url. In addition to displaying the video title, you can also display additional details about the video such as the thumbnail image from the json.
Other YouTube Functions
There are other functionalities that you can include in your website such as uploading a video, creating or modifying a playlist, searching a channel, downloading a video, getting the videos from users channel, and so on. The code is already there in the Google Developers, but the rel challenge lies in how you incorporate into your application. It also depends on how you customize the code and also taking care that your application does not crash due to the YouTube API. You also need to take care of the minimum units available per day and always upgrade more depending on the use.