How I Built a YouTube to MP3/MP4 Converter Web Service

#webdev #programming #python #api

As an avid tech enthusiast and a believer in creating user-friendly tools, I set out to create something that many people often search for—a simple and efficient YouTube video-to-audio/video converter. After hours of brainstorming, coding, and some dead ends, I successfully built a web service that lets you convert YouTube videos into MP3 or MP4 formats, making it easier than ever to download your favorite content. Sounds simple enough, right? Well, it wasn't all smooth sailing. Here's a deep dive into the architecture, challenges, and technology choices behind the project.

The Problem I Wanted to Solve

We all know YouTube is an amazing platform with loads of great content, but sometimes you just need to download a video for offline use or convert it into an audio file (maybe for a podcast or offline listening). However, not all solutions available online provide a seamless experience. Many of them are riddled with annoying ads or worse—malware. So, I wanted to create something different, something clean, efficient, and trustworthy, without all the hassle.

And that’s how the idea for ytb2mp4.com was born. A straightforward, no-nonsense web service to convert YouTube videos into MP3/MP4 formats.

Technologies Used

When deciding on the tech stack, I needed something that was not only scalable but also robust enough to handle large amounts of requests efficiently. Here's what I used to build the service:

Frontend: Built using Next.js and React, with a sprinkle of TailwindCSS for styling. Next.js gave me the flexibility to handle both static and server-rendered content, which was important for SEO (search engine optimization) and user experience.

Backend: Nodejs with express was my go-to choice for the backend. Nodejs is lightweight, easy to use, and has a massive ecosystem of extensions. It allowed me to keep the backend simple yet powerful, handling API requests and managing conversions efficiently.

Youtube Data Extraction: This is where things got tricky. Initially, I planned to use libraries like yt-dlp or pytube for extracting and converting YouTube data. Unfortunately, YouTube’s restrictions block many open-source libraries from making reliable requests. After several attempts with these libraries, I switched to using youtubei.js, which, when paired with cookie-based authentication, allows me to bypass these restrictions effectively. More on this later.

Deployment: I used Vercel for hosting the frontend and Fly for the Nodejs API server. Both services offer easy deployment pipelines, and their free tiers are perfect for projects like this.

High-Level Architecture

Keeping it simple but scalable. I wanted the architecture to be as simple as possible, without compromising scalability or performance. Here’s a high-level breakdown:

Frontend
The frontend is where the user interacts with the service. I chose Next.js because of its flexibility to serve both static and server-side content. It also supports API routes, which allow you to build out your entire web app with a single framework. For styling, I opted for TailwindCSS—its utility-first approach made it super easy to design a clean, responsive interface quickly.

Backend
The Nodejs/Express backend handles the core logic of the application. Users submit a YouTube URL, and the backend takes care of fetching the relevant data, converting it, and offering a download link. Here's where the backend gets interesting.

I initially tried using the yt-dlp and pytube libraries to directly interact with YouTube’s data. However, YouTube has gotten pretty smart at blocking requests coming from such libraries. After trying different approaches and receiving multiple “403 Forbidden” errors, I had to pivot.

API Integration with youtubei.js and Node.js for YouTube Data Extraction

Switching to a custom solution using node.js and youtubei.js has been a significant improvement. While yt-dlp and pytube posed challenges due to frequent changes in YouTube’s API, youtubei.js provides a robust alternative for data extraction by leveraging cookie authentication to maintain stable access to YouTube’s data.

Here's the updated flow:

User Submission: When a user submits a YouTube URL, the backend extracts the video ID.
Data Fetching with youtubei.js: The backend utilizes youtubei.js to retrieve all necessary video details—such as title, duration, and available formats—through authenticated requests. This approach bypasses common restrictions and delivers reliable results.
User Selection: Based on the user’s preference (MP3 or MP4), the Nodejs backend with youtubei.js behind for video download prepares the corresponding file.
Download Link: Once the file is ready, a download link is generated and sent back to the Nextjs client.

This shift to youtubei.js has allowed for more consistent data extraction without the need for external API providers.

Other Challenges and How I Solved Them

File Naming and Audio-Only Files
One common complaint with such services is the weird file names generated after downloading. I tackled this by using the video’s title for the file name—making it easier for users to organize their downloads. Another issue was ensuring that the MP3 files didn't contain any video streams. I took care to handle this with correct post-processing during the conversion.

YouTube Blocking Requests
YouTube has implemented various measures to restrict access to its data, which blocks many popular open-source libraries like yt-dlp and pytube from making consistent requests. After a lot of trial and error, I discovered that the key to reliable YouTube data access lay in authenticating requests with cookies.

Initially, I relied on RapidAPI to work around these limitations, but transitioning to a direct, cookie-authenticated approach with youtubei.js allowed me to avoid third-party services and gain more control over the request process.

How Cookie Authentication Works with YouTube

To bypass YouTube’s blocks, you can use session cookies from an active YouTube account. By including these cookies in each request, we can mimic a legitimate browser session, which provides reliable access to video data while staying compliant with YouTube’s access rules.

Including cookies in this way allows youtubei.js to make requests that look like they’re coming from a logged-in user, bypassing many of YouTube’s automated blocks on anonymous or bot-like traffic.

Cross-Origin Issues
When interacting with different APIs and services, CORS (Cross-Origin Resource Sharing) issues are quite common. I made sure to configure proper CORS policies in both the frontend and backend to avoid errors when fetching and downloading data from different origins.

Why Use ytb2mp4.com?
There are plenty of reasons why my service stands out among others:

Free: 100% free to use, with no hidden costs or annoying ads.
High Quality: Offers the best available MP3 and MP4 quality, including 4K video downloads.
No Annoying Ads: Unlike many other services, I’ve made it a point to keep the platform ad-free. All I ask is for a small donation if you like the service!
Easy to Use: The interface is clean and straightforward. Even if you’re not tech-savvy, you’ll find the service easy to use.

If you want a hassle-free experience converting your favorite YouTube videos into MP3 or MP4 formats, check out ytb2mp4.com today. I’m continuously working on improving the service, and I’d love to hear your feedback!

Final Thoughts
Creating ytb2mp4.com was both a challenge and a joy. From figuring out how to bypass YouTube's restrictions to fine-tuning the user experience, this project pushed me to my limits, but it was worth every minute. I hope you find it as useful as I do, and I’m excited to keep improving it as more users come on board!

Feel free to try out the service and let me know what you think!