How to Make a Website like Youtube

Posted by Marta on May 11, 2021 Viewed 270 times

Learn how to make a website like Youtube. Learn the fundamentals of how to stream videos and build a video player website step by step.

Card image cap

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.

Let’s dive in.

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

Initially, we will need an S3 bucket to store our first video. To do so, go to the AWS console, select the S3 bucket and click on “Create Bucket.”

Next, we need to enter a bucket name. We could choose any name. In this example, we will use hellocodeclub-streaming and click “Create Bucket” at the bottom, without changing any other options.

Now that we have a bucket, let’s upload our first mp4 video. We can upload a video by clicking on the bucket and then “Upload”:

Step #2: Convert video to HLS with AWS MediaConvert

Our video is now uploaded to S3, so next step is converting the video to HLS using MediaConvert. In MediaConvert, we can perform conversions using jobs. You could see a job as a task, where we will indicate the file we want to convert, the conversion we want to perform, and the destination of the result.

Therefore, Go to MediaConvert in the AWS Console and click on Jobs and “Create Job.”

To create a job we need to enter four pieces of information. Firstly, the video we want to convert. For this example, we will use the video we just uploaded to s3 bucket:

Next piece of information is the conversion format to use. Click on the button “Add” next to Output Groups and choose “Apple HLS” and click “Select”

And now, we need to specify the destination of the converted files. For this example, we will send them to the S3 bucket we created earlier but to a different folder called “streaming.”

So, enter the bucket in the destination field and a name modifier. The name modifier is appended to the name of the resulting files:

Then select H.264 in the left side menu and enter the bitrate, in this example, we will use 240000 bits/second.

And click “Create”. We will go back to the S3 bucket and open the streaming/video1 folder to see the results. As you can see, AWS MediaConvert has converted the mp4 video to .ts files and .m3u8 files. In other words, video fragments and a playlist.

Step #3: Make streaming files available

Finally we need to make our bucket public, at least part of it, so our website can access the video files. There are four settings we will need to modify to make our bucket public.

First, we will enable static website hosting in the bucket by clicking on the Properties tab and then scrolling down to the “Static website hosting”. Then click on “Edit” and select “Enable” and enter index.html as the Index document. See the image below:

Now we will open the Permissions tab and modify the “Block Public Access”, the “Bucket policy” and the “Cross-origin resource sharing”.

We will start by modifying the “Block Public Access”. To do so, click on “Edit” in the Block public access and then untick the option “Block all public access”

We have changed the first settings. Therefore only two more settings need to be changed. The next one is the “Bucket Policy”. Go to the “Bucket Policy” in the Permissions Tab, Click on “Edit” and enter the following JSON:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hellocodeclub-streaming/streaming/*" // REPLACE WITH YOUR BUCKET NAME
        }
    ]
}

Please note your should replace the bucket name with your bucket in line 9.

And the last setting to modify is the “Cross-origin resource sharing”. Do so by going to the “Cross-origin resource sharing” section, click “Edit” and enter the following JSON.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

Perfect! Our video is now ready to be streamed and a website can access it. What’s next? We need to start creating a simple website that will consume the videos.

If you are using a mac computer, you can test out your streaming setup by grabbing the url of the .m3u8 file and try to open it in Safari. If all is working correctly, your video will start playing.

See below the url you should paste in your Safari browser( only for mac):

Perfect, now that we have a better understanding of how to make a website like Youtube, let’s move on to next step.

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.

The first step is creating a react application. All we need to do is executing the following command from your terminal. Please note you need to install node.js before running the command. Download node.js from here

npx create-react-app 

Once you created the application, you will need to install three libraries: react-bootstrap, bootstrap, and react-hls-player. The first two contain CSS libraries that help us styling our website. The library react-hls-player contains a video player for HLS format.

Run the following commands to install the libraries:

cd website_like_youtube
npm install react-bootstrap bootstrap
npm install react-hls-player --force # or use th 

If you run into error when running the last command add the option --force or --legacy-peer-deps to avoid dependency conflicts and install the library.

Now that we have all the necessary libraries we can start adding the React and HTML code to form our website.

Now we will need to replace the code in the App.js file with the following code:

import logo from './logo.svg';
import './App.css';
import Navigation from './components/Navigation'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactHlsPlayer from 'react-hls-player';

function App() {
  return (
    <div className="App">
        <Navigation />
        <div class="container" style={{marginTop:"100px"}}>
            <div class="row p-2">
      	        <div class="row p-2">
      			    <div class="col-lg-3 col-xs-1 mx-auto pt-2">
      				    <div class="card" style={{width: "41rem"}}>
							
      				    	<ReactHlsPlayer height="410px"
      				    	    src="http://hellocodeclub-streaming.s3.eu-west-2.amazonaws.com/streaming/video1/hellocodeclub-streaming.m3u8"
      				    	    autoPlay={false}
                                controls={true}
                                width="100%"
                                height="auto"
      				    	/>
      				    	<div class="card-body">
      				    		<h5 class="card-title"><a href="/">First Video in my streaming site</a></h5>
      				    		<p class="text-m"><small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sapien a purus egestas fringilla. Praesent condimentum bibendum enim, eget elementum lectus blandit eget. </small></p>
      				    		<p class="text-muted font-italic"><small>Posted by <a href="#">Marta</a> Today</small></p>
      				    	</div>
      				    </div>
      			    </div>
      		    </div>
            </div>
        </div>
    </div>
  );
}

export default App;

Please note you should replace the url in line 18 with the url of the .m3u8 file you created earlier. In other words, the player should point to the manifest file hosted in your S3 bucket.

Next, create a folder called components within the src folder, and add a file named Navigation.js with the following code:

import React from "react"

const Navigation = (props) =>{
    return(
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav" style={{background:'lightgrey'}}>
            <div class="container" style={{color:"white"}}>
                <a class="navbar-brand" href="/">
            	  <img class="mr-3" src="./logo.png" height="40px" style={{borderRadius:"50px"}}/>
            	  Your Streaming Site</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                  Menu
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                  <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                      <a class="nav-link" href="/about">About</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="/contact-me/">Contact Me</a>
                    </li>
                  </ul>

                </div>
            </div>
        </nav>
    );
}
export default Navigation;

Source Code available here.

Perfect! That is all you need to do. Our website is now ready to start running. Let’s start up the website by running the following command from the project root:

npm start

After running this command, access your website by opening the terminal and entering:

http://localhost:3000

If everything went well, you should see something similar to the image below:

Conclusion

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 and supporting this blog!

More Interesting Articles

Project-Based Programming Introduction

Steady pace book with lots of worked examples. Starting with the basics, and moving to projects, data visualisation, and web applications

100% Recommended book for Java Beginners

Unique lay-out and teaching programming style helping new concepts stick in your memory

90 Specific Ways to Write Better Python

Great guide for those who want to improve their skills when writing python code. Easy to understand. Many practical examples

Grow Your Java skills as a developer

Perfect Boook for anyone who has an alright knowledge of Java and wants to take it to the next level.

Write Code as a Professional Developer

Excellent read for anyone who already know how to program and want to learn Best Practices

Every Developer should read this

Perfect book for anyone transitioning into the mid/mid-senior developer level

Great preparation for interviews

Great book and probably the best way to practice for interview. Some really good information on how to perform an interview. Code Example in Java