How to Make a Website like Youtube

In this tutorial, you will learn how to make a website like Youtube. Creating a website like Youtube can be complex due to the scale and its recommendation engine. Youtube has to manage millions of users and videos; however, making a simple site with streaming capabilities for few videos is reasonably achievable.

We will see how you can stream videos using AWS services and how you can create a simple website to display these videos using React. Don’t worry if you don’t know React; the React code is mostly HTML.

Please note that you will see an AWS account to follow this tutorial.

How does Streaming work?

Before we start learning how to make a website like Youtube, we need to clarify what streaming is. Streaming allows us to watch a video over the internet without downloading the video files. How is this achieve? You can achieve this by splitting a video file into tiny fragments that can be easily transmitted over the internet.

There are different protocols to manage the video fragments. In this tutorial, we will see the HLS protocol. The HLS is an HTTP-based protocol that converts the video into a bunch of pieces called segments( .ts files) and a manifest( .m3u8 file) which acts as a playlist. The manifest determines the order in which the video player should play the segments.

Why is this important? Because the first thing we should do to stream a video is converting it into HLS format to be transmitted over the internet.

Streaming Videos with AWS S3

As mentioned earlier, first, we wi convert our mp4 file into HLS format. To convert the video, we will use AWS MediaConvert service as well as s3. S3 will act as a static hosting, and MediaConvert will convert to HLS; in other words, it will split the video into small segments. Let’s see step by step how to put this into action:

Step #1: Create an S3 bucket - See step by step details here

Step #2: Convert video to HLS with AWS MediaConvert - See step by step details here

Step #3: Make streaming files available - See step by step details here

Creating a Simple Website

So far, we have seen how to stream videos. What’s next to learn how to make a website like Youtube? The next step is building a website where we can display the videos. We will use React to build the website using React, however, most of the code is HTML. I have designed it this way intentionally, so it is easy to follow even if you don’t know React.

All details and code to create a simple website available here

In conclusion, in this tutorial you learn the fundamentals of how to make a website like Youtube. Including how to convert video files to HLS format, which makes your videos are available for streaming. Additionally we have seen how to add a player to your website so other people can watch your videos.

The technologies used to create the website were AWS S3, AWS MediaConvert, and React.

I hope you enjoy this article, and thank you so much for reading!

Happy Coding!