• Welcome to the all-new Windows Central Forums! - We're still moving some things around, so you may see a few quirks here and there, but we're working on getting things fully completed as soon as possible. For now, take a look around, and if you run into any major issues, please let us know in this thread!

[Tutorial] YouTube Videos in your apps the easy way


New member
Nov 8, 2013
This is my first tutorial here at WPCentral hope you guys like it.

Scenario : Need to implement an YouTube functionality in the app where the app should display a list of YouTube videos in a List and when a taps on it it should play the video.

Solution : Considering that you already have a Visual Studio Windows Phone 8 project open follow these steps
  1. From the nuget manager search for the package "MyToolkit.Extended" (This requires the WPToolkit Package too)
  2. Once your done with this the next step is to create a Template in App.xaml which will be your layout to display the videos so in App.xaml copy this code.
    Do not forget to declare this
    Then in the Application.Resources copy the code which is below
    <DataTemplate x:Key="VideoResultTemplate">
                <Grid Margin="12">
                        <ColumnDefinition Width="200"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    <extended:YouTubeButton Width="200" YouTubeID="{Binding VideoID}" Height="150" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="0"></extended:YouTubeButton>
                    <TextBlock Text="{Binding VideoTitle}" Foreground="Black" VerticalAlignment="Top" Margin="5,0,0,0" TextWrapping="Wrap" Width="150" Grid.Column="1" />
    Explanation about this code : All you are doing is creating a DataTemplate which has a grid and has two controls one is a YouTubeButton which is a part of the MyToolkit.Extended package , which displays a small thumbnail of the video and a play icon over it the other control is just TextBox to display the title of the video.

  3. Now lets move to the MainPage.XAML
    Simply make a ListBox and set the ItemTemplate to VideoResultTemplate
    <ListBox x:Name="ResultsList" ItemTemplate="{StaticResource VideoResultTemplate}" ItemsSource="{Binding SearchResults}" Tap="ResultsList_Tap" />
    In the MainPage.XAML.VB
    Import These
    Imports MyToolkit
    Imports MyToolkit.Controls
    Imports MyToolkit.Multimedia

    Now paste this code
        Friend WithEvents wc As New WebClient
        Public Sub FetchVideoList(searchname As String)
            Dim searchUri = String.Format("http://gdata.youtube.com/feeds/api/videos?q={0}&format=6", HttpUtility.UrlEncode(searchname))
            wc.DownloadStringAsync(New Uri(searchUri))
        End Sub
        Private Sub wc_DownloadStringCompleted(sender As Object, e As DownloadStringCompletedEventArgs) Handles wc.DownloadStringCompleted
                Dim atoms = XNamespace.Get("http://www.w3.org/2005/Atom")
                Dim medians = XNamespace.Get("http://search.yahoo.com/mrss/")
                Dim xml = XElement.Parse(e.Result)
                Dim videoCollection = From entry In xml.Descendants(atoms.GetName("entry")) Select New YouTubeListItem(entry.Element(atoms.GetName("title")).Value, entry.Element(atoms.GetName("id")).Value)
                ResultsList.ItemsSource = videoCollection
            Catch ex As Exception
            End Try
        End Sub

    Public Class YouTubeListItem
        Public Property VideoTitle As String
        Public Property VideoID As String
        Public Sub New(Title As String, id As String)
            Dim parsed = id.Split("/")
            VideoID = parsed(parsed.Length - 1)
            VideoTitle = Title
        End Sub
    End Class

    Explanation of the above code : You are reading the YouTube feed and formatting it correctly for the ItemSource of the Listbox adding each entry of the result to the YouTubeListItem object.

    The Results Tap Code
    Private Sub ResultsList_Tap(sender As Object, e As System.Windows.Input.GestureEventArgs)
            If ResultsList.SelectedIndex <> -1 Then
                YouTube.Play(CType(ResultsList.SelectedItem, YouTubeListItem).VideoID, YouTubeQuality.Quality480P, Nothing)
            End If
    End Sub

    To Load the YouTubeMovies
    Use this code in any of the Events
Hope this has helped.

Members online

Forum statistics

Latest member