Using Blazor.NET to Create a YouTube Thumbnail Extractor

Have you ever needed to quickly extract a thumbnail from a YouTube video? With the power of Blazor.NET, you can create a small web application to automate this process in no time. Blazor.NET, a modern web framework from Microsoft, allows developers to build interactive web applications using C#. In this blog, we’ll guide you through the steps to create a YouTube Thumbnail Extractor using Blazor.NET.

1. What is Blazor.NET?

Blazor.NET is a web framework that enables developers to build interactive web applications using C# and .NET instead of JavaScript. It supports both server-side and client-side (WebAssembly) hosting models, making it a versatile choice for modern web applications.

2. Application Overview

The YouTube Thumbnail Extractor is a simple web application where users can input a YouTube video URL, and the app extracts and displays the corresponding video thumbnails. YouTube videos have multiple thumbnail resolutions, and this app will retrieve them all.

3. Steps to Build the Application

Step 1: Set Up the Blazor Project

Start by creating a new Blazor WebAssembly project in Visual Studio or your preferred IDE. Open a terminal and run the following command:

dotnet new blazorwasm -o YouTubeThumbnailExtractor
        

Navigate to the project directory:

cd YouTubeThumbnailExtractor
        

Step 2: Create the User Interface

Open the Index.razor file and create a simple input form for users to paste the YouTube video URL. Here’s an example:

<h3>YouTube Thumbnail Extractor</h3>

<input type="text" @bind="videoUrl" placeholder="Enter YouTube Video URL" />
<button @onclick="ExtractThumbnails">Get Thumbnails</button>

<div>
    <h4>Thumbnails:</h4>
    <div>
        @foreach (var thumbnail in thumbnails)
        {
            <img src="@thumbnail" alt="Thumbnail" width="200" />
        }
    </div>
</div>
        

Step 3: Add the Logic to Extract Thumbnails

Below the UI code, add the logic to extract thumbnails from the YouTube video URL. Update the @code block as follows:

@code {
    private string videoUrl = string.Empty;
    private List<string> thumbnails = new();

    private void ExtractThumbnails()
    {
        if (string.IsNullOrWhiteSpace(videoUrl))
        {
            return;
        }

        // Extract the video ID from the URL
        var videoId = ExtractVideoId(videoUrl);
        if (!string.IsNullOrEmpty(videoId))
        {
            thumbnails.Clear();
            thumbnails.Add($"https://img.youtube.com/vi/{videoId}/hqdefault.jpg");
            thumbnails.Add($"https://img.youtube.com/vi/{videoId}/mqdefault.jpg");
            thumbnails.Add($"https://img.youtube.com/vi/{videoId}/sddefault.jpg");
            thumbnails.Add($"https://img.youtube.com/vi/{videoId}/maxresdefault.jpg");
        }
    }

    private string ExtractVideoId(string url)
    {
        var uri = new Uri(url);
        var query = System.Web.HttpUtility.ParseQueryString(uri.Query);
        return query["v"];
    }
}
        

Step 4: Run the Application

Launch the application by running the following command in the terminal:

dotnet run
        

Open your browser and navigate to the application. Enter a YouTube video URL, click the "Get Thumbnails" button, and watch as the thumbnails appear!

4. Key Takeaways

This simple application demonstrates how Blazor.NET enables developers to quickly create interactive and powerful web applications. The YouTube Thumbnail Extractor is just the beginning—you can extend its functionality to download thumbnails, customize styles, or even create a full-fledged video management tool.

Note: Always ensure you comply with YouTube’s API and usage policies when accessing or displaying data from their platform.

Conclusion

Blazor.NET provides an excellent framework for building modern, interactive web applications with C#. By following the steps above, you can create a functional YouTube Thumbnail Extractor and explore the vast possibilities of Blazor.NET for your next project.