CODEWITHSUNDEEP
angularyoutube-apiyoutube-data-api
Dan Rullo
Dan Rullo

Reputation: 343

Using YouTube Data API in Angular App

I've been trying to wrap my head around the YouTube API documentation, but it seems to be pretty bad. There's a Getting Started video on their page that's WAY out of date and doesn't match up to the current developer's console at all.

Has anybody interfaced with their API in a modern Angular (v2 - v5) app? Surprisingly, the code samples in their documentation include a lot of platforms, but not their own (Angular). And the samples that are there leave me with a lot of unanswered questions (i.e. they seem to reference API libraries but don't tell you where/how to get them). They use a lot of YouTube-specific terminology without defining it. It's very frustrating.

My need is pretty simple... I need to develop an app that allows users to search my YouTube channels and play videos. Literally the most basic YouTube functionality. But every time I try to tackle their API, I end up giving up.

Upvotes: 1

Views: 2531

Answers (1)

Rohan Varma
Rohan Varma

Reputation: 1195

The video that John posted looks good. I wanted to add some additional context into the way you should think about using the youtube API here.

You don't need heavy usage of the API that would require authenticating users into their Youtube accounts and such. All you need is to be able to search through their public information the same way you would if you went to the website.

They have a way of doing this through their gapi client which you can easily include into your webpages. The type of example you are looking for is the "javascript" examples since those show you how to search using javascript by hitting their APIs. This javascript method will work within your angular app since it is written with javascript.

Take a look at the javascript and HTML they have in this example. The crux of it is in this JS code:

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}

They use the gapi.client.youtube tool which works because in the HTML they import the library:

<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

For playing videos in your website, all you need to do is include the youtube embed and specify the video URL which can be done very easily if you search it up on Google.

Hopefully this gives you some context for integrating youtube searching into your website. Good luck!

Upvotes: 0

Related Questions