Embedding a YouTube feed in Xamarin.Forms
When building an app for a customer that has an active YouTube channel you might get the requirement to embed their YouTube channel into the app. This is actually simpler then you might think. Since YouTube is a Google product you can bet your life’s savings on the fact that there’s an API for it.
Creating a new Xamarin Forms project
For this article, I’m assuming that you’re familiar with what Xamarin Forms is and how it works. So without further ado let’s jump into Visual Studio. Start off by creating an empty Xamarin Forms solution. I chose the Portable Class Library variety for this project. Give it a fancy name and hit Create. I named mine YouTubeEmbed which isn’t all that original but it does the trick. Your solution explorer window should look something like this when you’re done.
Getting your API keys
Most API’s won’t simply let you pull in their data. The YouTube API is no different. To retrieve data you will need to register an API key which you need to pass in with every request. That way YouTube knows that you’re calling their API as a validated user. To get such an API key you can go to your Developer Console and register it. First, we need to Create a new project in the API console which we can do where it says My project in the top-left corner. When that is said and done we can search for the YouTube Data API, which is the one we’re going to be needing for this project.
After you’ve enabled the YouTube Data API v3 you will see a API key in the Credentials section. This is the key we’ll be using in this sample. I removed it from the screenshot since you need to make your own key 🙂 Copy it over to your Xamarin app.
Calling the API and retrieving the data
Since the YouTube API is REST-based we need a URL to call and retrieve our data. That URL is documented pretty well and for the scope of this post it looks like this when we put it into a constant in our project.
When we call that URL with a valid API key and a valid channel ID we get the following data from it (shortened for clarity). As you can see this isn't all that much. Basically the only usable thing in here is the videoId. You might have seen similar ID values in the address bar of your browser when viewing a YouTube video. So why don't we see a lot of useful info here? Well, that's because the YouTube API forces you to retrieve video details on a per-video basis.
So how does this look in code? First we spin up an HttpClient instance and call the URL mentioned above. After deserializing the response into a basic DTO object we retrieve all the VideoID variables from the result and get the details for each item using the GetVideoDetailsAsync method.
Getting the details for each video
So how do we get the details for each video in our list? If we had to create an HTTP request for each video we would probably blow up the YouTube API. Luckily we don't need to make an API call for each video we want to check. YouTube lets you provide a comma-separated list of video IDs and gives you a list of detailed information for each video in return. That means we can get the information we need from one additional API call. You can call the detailed API in similar fashion to the API call above.
Showing it all in the app
With the beauty of data-binding and MVVM in Xamarin Forms it is super simple to show a list of videos in our app. The XAML code below shows the thumbnail, video title, amount of views and publishing date in a format similar to the YouTube app.
With those few lines of code we get something that looks like this:
Give me the source!
If you want to look at the source for this to see how it all fits together you can find it up on Github. You can use it as a starting point for your own implementation. Time to get coding!