Youtube API Integration In Asp.Net Core

The YouTube Data API allows you to integrate tasks that would ordinarily be performed on the YouTube website
into your website or application. A search result is a piece of information about a YouTube video, channel, or playlist
that corresponds to the search criteria supplied in an API request. Although pointing to a uniquely
identified resource, such as a movie, a search result does not contain its own permanent data.

Let’s start,

First set up the YouTube API

follow the below step

Step 1: Go to google developer console and create a new project.

Step 2: Click on a new project and create a project and it will show you in the below list.

Step 3: Click on Enable APIS and Service button.

Step 4: Select a project.

Step 5: Navigate to the credentials page by clicking on Credential located on the sidebar menu.

Step 6: Click on the +CREATE CREDENTIALS button at the top of the page and select the API key. A new API key should be created.

Step 7: Open a visual studio and create a new project.

Step 8: Install the Google.Apis.YouTube.v3  and Google.Apis NuGet package.

Step 9: Create a new model class to hold YouTube video results for our view.

public class YouTubeVideoDetails
{
    public string Thumbnail { get; internal set; }
    public string Title { get; internal set; }
    public string VideoId { get; internal set; }
    public string Description { get; set; }
    public string VideoUrl { get; set; }
}

Step 9: Add controller and copy-paste the below code.

public async Task<IActionResult> Search(string data)
        {
           List<YouTubeVideoDetails> Videos = new List<YouTubeVideoDetails>();
            using (var youtubeService = new YouTubeService(new BaseClientService.Initializer()
            {
                ApiKey = "<your api-key>" //Copy from Google developer console
            }))
            {
                var searchListRequest = youtubeService.Search.List("snippet");
                searchListRequest.Q = data;
                searchListRequest.Type = "video";
                searchListRequest.Order = SearchResource.ListRequest.OrderEnum.Relevance;
                searchListRequest.MaxResults = 100;

                var searchListResponse = await searchListRequest.ExecuteAsync();
                Videos.AddRange(searchListResponse.Items.Select(video => new YouTubeVideoDetails
                {
                    Thumbnail = video.Snippet.Thumbnails.High.Url,
                    Title = video.Snippet.Title,
                    VideoId = video.Id.VideoId,
                    Description=video.Snippet.Description 
                   
                }));
            }
            return PartialView("~/Views/Home/_VideoList.cshtml", Videos);
        }

Step 10: In your view copy-paste the below code for ajax call and  search textbox.

<div class="text-center">
 
    <img src="~/youtube-logo-164319198616x9.webp" style="width:100px" />
    <i class="fa fa-youtube-play" style="font-size:48px;color:red"></i>
    <div style="display:flex;margin:10px">
        <input type="text" placeholder="Search" id="txtsearch" class="form-control" />
        <button type="button" id="btnsearch" class="btn btn-danger">Search</button>
    </div>
</div>
<div id="dvPartialView">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $("#btnsearch").click(function () {
        var data = $("#txtsearch").val();
        $.ajax({
            type: "GET",
            url: "/Home/Search?data=" + data,
            success: function (response) {
                $('#dvPartialView').html(response);
            }
        });
    });

</script>

Step 11: Add partial view and copy-paste the below code to display data get from the Youtube API response.

@model List<YouTubeVideoDetails>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="row">  
    @foreach (var item in Model)
    {
        <div class="card m-3 col-md-3 px-0" style="width: 18rem;">
            <img src="@item.Thumbnail">
            <div class="card-body">
                <h5 class="card-title"> <a href="https://www.youtube.com/watch?v=@item.VideoId" target="_blank">@item.Title</a></h5>
                <p class="card-text"> @item.Description</p>
                <a href="https://www.youtube.com/watch?v=@item.VideoId" target="_blank" class="btn btn-danger">Watch</a>
            </div>
        </div>
    }
</div>

OUTPUT