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