Case Studies · 4 min read

Build a YouTube clone

Rebuilding YouTube with api.video and Next.js

This tutorial will show how quickly and straightforward you can build a YouTube clone with api.video and Next.js.

Mathieu Thiry

March 17, 2022

This tutorial will show how quick and straightforward it is to build a youtube clone with api.video and Next.js. By encapsulating the front-end and backend inside our Next app, we can rapidly develop and deploy as we need a backend to run @api.video/nodejs-client.

YouTube’s core functionality is the video library, so today, we will focus on this crucial feature: listing videos. You will have all the steps to build a public catalog of videos for your product. The demo is available here and the code here. Let's start 🎬

cover youtube clone

1. Application setup

Let's quickly start to build a new Next.js application using Create Next App

Run these commands in the terminal:

bash

*Note: We'll use styled-components and react-feather for icons to style our example application, but you can ignore these steps if you have another preference. *

Once inside our project, install these three packages:

bash

2. Configuration

Configuration styled-components

Since 12.1, Next.js added support to the Next.js Compiler for styled-components, update your next.config.js file:

json

Create a custom _document.js file

To render our styled-components at the server-side, we need to override _document.js. For this, create a _document.js file under the pages folder and add the following content into it. We will use also use the google font Roboto.

jsx

3. How to fetch data

Create API routes with api.video/nodejs-client

You can declare the API under the pages/apidirectory. When you declare a file or folder insidepages/api, it will generate an URL endpoint that matches /api/<folder>/<file>. It's all server-side. We set our API key in an environment variable in the .env.development file for security.

Now create a pages/api/content.jsfile. Inside this file, add the following code:

javascript

We can get videos in just a few lines of code by applying the method list.

@api.video/nodejs-client allows us to filter by title, tags, metadata, description, pageSize, full documentation is here. Let's focus on title for now.

Call API routes in the front-end.

Go to pages/index.js and call the endpoint we just created on mounting. Save the result in the state videos.

jsx

Search on the navbar

Search Youtube clone GIF

@api.video/nodejs-client allows us to filter videos by name. We’re going to implement a simple field where we can enter a searchable value.

jsx

4. How to display a list of videos

tags youtube clone gif

How to filter videos with tags

api.video provides many features. One of them allows you to a tag to a single video. This demo excellently showcases how to use it.

1 ) Add a tag to the dashboard.

The easiest way to add a tag is to go to api.video dashboard, go to videos sections, click on a video, “see details” of a video and add a tag. The video here explains how to do it.

The next step is to apply the filterTags function to the videos, which:

  • Retrieves all of the tags
  • Sorts by “the most used”
  • Returns a clean tag array that we will store in a state

2 ) Store tags in a state

javascript

We call this util function each time we get videos. We store the array of values in a state. We also create another state, “active state, “ the current state. By default, it is “All”.

jsx

3 ) Display Tags component

The tag's value is in the Chip component. By default, the Chip “All” is displayed, and next, each tag is stored in the tag array. If you click on the chip, you update the value of the tag state. The props isActive shows a different style based on whether true or false.

jsx

4 ) Filter videos by the activeTag

Then let's apply to the videos array the filterElement function, which only displays videos whose tags are equal to the activeTag. This function applies only if the activeTag is different from All.

jsx

5. How to use the player from api.video

api.video provides a performant and fully customizable player. As soon as you upload a video, it automatically creates a link to the api.video's player. You can, of course, customize your player directly in the dashboard. Then, let's encapsulate the player in an iframe. The props video corresponds to a video object.

jsx

Conclusion

We recreated YouTube thanks to api.video’s features in just a few steps. We did not cover all the topics such as dynamic routing usage of react context to store the API key, but the entire code is available here.

And we're done! To start building right now, check our docs and sign up for a free account.

BONUS

In this part, I will explain how easily you can display the video on hover

hover gif youtube clone

Create a file to regroup our CSS logic in style.js. The trick is to display the video on hover instead of the image. A way to achieve it is to add the property display: none to the image and display: block to the video.

javascript

As shown below, we pass each video object as props to the Video component.

We don't need to format the answer in the child component Video. We can destructure the video object and access the image and video.

jsx

Try out more than 80 features for free

Access all the features for as long as you need.
No commitment or credit card required

Video API, simplified

Fully customizable API to manage everything video. From encoding to delivery, in minutes.

Built for Speed

The fastest video encoding platform. Serve your users globally with 140+ points of presence. 

Let end-users upload videos

Finally, an API that allows your end-users to upload videos and start live streams in a few clicks.

Affordable

Volume discounts and usage-based pricing to ensure you don’t exceed your budget.