Make a YouTube app with AngularJS and Onsen UI

In this tutorial, we will learn how to consume YouTube Data API v3 JavaScript from our hybrid app with an Onsen UI interface using AngularJS. We will be able to add YouTube functionality to play videos and show them on top of our Onsen UI elements very easily!

YouTube Data API v3 is the latest API that Google provides to interact with its famous video platform. They provide code samples for many languages such as Go, Java, .NET, Python, Ruby and, of course, JavaSript. In this tutorial, we will create and set up a basic YouTube player that will run our requests and play the videos we select. Even though we are using AngularJS here, this guide may help those who prefer pure JavaScript or jQuery since the YouTube API usage is very similar. Also, we will use Monaca here with its awesome Monaca Debugger to quickly test this app on real devices:

This app will have an ons-tabbar to separate the search results from our video history and every video will be displayed inside an ons-modal. Once again, all the code of this example is available to download on GitHub. You can play some videos with this app and see how it works before getting to the actual code:

Onsen UI YouTube

This sample app is based on an open-source YouTube Jukebox made by J. Thomas on GitHub. However, here the app has been simplified for beginners. If you want to see something a little bit more complex (like playlists) you can check out his project!

Starting with YouTube Data API v3

Before starting to code we need to get a valid API key to interact with YouTube Data API v3. We have to visit Google Developers Console (with our Google account), create a new project and activate access for YouTube Data API v3. In the credentials section, we have to select a method to access to this API that, in our case, will be public access only from our GitHub gh-pages repository. We will need to attach the generated API key to every request we make to the YouTube player later on.

Once we’ve got our API key, the next step will be understanding how the API works. In this example, we will embed a YouTube player in our app and we will send requests to it by using the YouTube IFrame Player API. This API will serve an HTML5 player instead of a Flash player for mobile devices that don’t support Flash, which is perfect for mobile apps.

Bootstrapping YouTube Player in an AngularJS service

To start with the code, first of all we need to load the YouTube IFrame Player API JavaScript code, and to do so we modify the DOM as explained in the API docs:

Now that we have the API loaded, we need to create a “placeholder” for our YouTube player that will be filled with the actual player later on. In this case we will show the videos inside an ons-modal, so our index.html will be as simple as this:

As you can see there, we create an ons-modal and inside it we just need to place a normal div. This div will be replaced with an iframe later on, so we can directly use an iframe instead and specify values like width and height on it if we want. Furthermore, we have a simple ons-tabbar to organise the navigation pattern of our app.

The API code is loaded and we have a “placeholder” in the right position, but we still need to bootstrap our YouTube player. To do so, we have to implement a JavaScript function named onYouTubeIframeAPIReady that will be called once the player’s code has been downloaded and it will create the actual player. In this example, we create a VideosController that will take care of all stuff related to YouTube API. We define a youtube object with some useful data that will hold the final player as follows:

Now we have to bind this object to the HTML element where we want to display the player:

this.bindPlayer = function (elementId) { 
    youtube.playerId = elementId; 
};

And we create the actual YouTube player using its API (YT.Player( ... )):

Finally, we define the mentioned onYouTubeIframeAPIReady() function that will call the previous methods:

And that’s it! Our YouTube player is created and displayed inside our ons-modal. If you check the HTML code again, you will see that we have added ng-click="youtube.player.stopVideo(); modal.hide(); to the modal. We want to stop the video and hide it when we click outside the actual video (over the rest of the modal) so this will do the trick. Instead of stopping and hiding it here we could also display it on a corner of the screen like the official YouTube app, for example.

In order to load a new video, we make a new method in our VideosService that will send the video ID to the API for us:

We have now our VideosService fully prepared to consume the YouTube API v3, so we just need to create a VideosController and use the service from our app.

Consuming the API from an AngularJS controller

The key functionality here is the searching method:

To search with the YouTube API v3 we make a GET request to https://www.googleapis.com/youtube/v3/search. Here we need to specify some values for the query:

• key: The API key we got on previous steps.
• type: The type of the resource we are asking for (video, playlist, channel).
• maxResults: Number of videos that YouTube will return.
• pageToken: this is a very good feature for pagination. Normally we should do something like query().skip( nItems * nPages ).limit( nItems ) in order to perform pagination, but YouTube will ease this process and will return a “nextPageToken” and a “prevPageToken” in each request we make. In case we want to get the next page we just need to attach the obtained “nextPageToken” to this field and YouTube will skip the videos we already got in the previous request. This feature will be very handy since we just need a button to load more videos but we are not interested in the actual page number.
• part: Specifies a comma-separated list of one or more search resource properties that the API response will include.
• fields: This is just a selector that specifies which fields to include in the partial response. Don’t forget to include nextPageToken.
• q: The query string that will be searched in YouTube.

You can find further information and other parameters for search requests in YouTube docs for search.list.

In the success callback, we must store the nextPageToken returned by YouTube in case we want to load more videos for the same query later on. We are also listing the results in an ons-list in the search.html page.

Finally, when we click on an item in our list we need to ask our YouTube player to get and display that video:

In this app we are storing the played videos in an extra list that will be displayed in history.html. In case we click on a video in the history (not in the search results) we won’t need to archive it anymore.

Some extra resources

So far we have seen how to use the basic but yet most important part of the API. There are some feature we have skipped in order to simplify the app. For instance, some useful points are the events that we can use associated to the YouTube player:

We can define our onYoutubeReady and onYoutubeStateChange functionality to do whatever we need. For example, we can make a playlist by just playing the next video when our YouTube player changes its state to ‘ended’ by using its API:

There are many other features in YouTube API v3 that you can discover in the docs:

Conclusion

As you have seen, accessing to YouTube videos and other resources is quite easy with YouTube Data API v3. Hopefully we will start seeing more multimedia hybrid apps with YouTube and Onsen UI from now on! If you have any doubt don’t hesitate to ask in the comments, on GitHub issues or Stack Overflow. More tutorials will be coming soon!

Originally published at onsen.io on July 22, 2015.