VISVESVARAYA TECHNOLOGICAL UNIVERSITY

BELAGAVI-590018

“INTERNSHIP”
(18CSI85)

REPORT ON

“THE YOUTUBE CLONE USING

JAVASCRIPT & CUSTOM JSON API KEY”
Submitted in partial fulfillment for the requirements for the Award of Degree of

BACHELOR OF ENGINEERING
IN
INFORMATION SCIENCE AND ENGINEERING
BY

USHA S
1EP20IS096

UNDER THE GUIDANCE OF

Prof. Shreedevi B C
Asst. Professor
Dept. of ISE,
EPCET

Department of Information Science and Engineering

Approved by AICTE New Delhi| Affiliated to VTU,
Belagavi Virgo Nagar, Bengaluru-560049
2023-24
 (Affiliated to Visvesvaraya Technological University,
Belgavi) Bangalore-560049

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

CERTIFICATE

This is to certify that the Internship entitled “The Youtube Clone Using JavaScript and
Custom JSON API Key” is a bonafied work carried out by Ms. Usha S, bearing USN
1EP20IS096 in partial fulfillment for the award of Bachelor of Engineering in Information
Science and Engineering under Visvesvaraya Technological University, Belagavi during
the year 2023-24. It is certified that all the corrections/suggestions indicated in the Internal
Assessment have been incorporated in the report and submitted in the department library. This
Internship report has been approved as it satisfies the academic requirements in respect of
Internship (18CSI85) prescribed for the award of the said degree.

GUIDE HOD PRINCIPAL

Prof. Shreedevi B C Prof. Kemparaju N Dr. Mrityunjaya V
Asst Professor Dept. Dept. of ISE, Latte
of ISE ,EPCET EPCET EPCET

Examiners

Name of the Examiners Signature with date

1.

2.
 ACKNOWLEDGEMENT

Any achievement, be it scholastic or otherwise does not depend solely on the individual
efforts but on the guidance, encouragement and cooperation of intellectuals, elders and
friends. I would like to take this opportunity to thank them all.

First and foremost I would like to express our sincere regards and thanks to Mr. Pramod
Gowda and Mr. Rajiv Gowda, CEOs, East Point Group of Institutions, Bangalore, for
providing necessary infrastructure and creating good environment.

I express my gratitude to Dr. Prakash S, Senior Vice President, EPGI and Dr. Mrityunjaya
V Latte, Principal, EPCET who has always been a great source of inspiration.

I express my sincere regards and thanks to Prof. Kemparaju N, Professor and Head,
Department of Information Science and Engineering, EPCET, Bangalore, for his
encouragement and support.

I am obliged to Dr. Vaishali Shende, Associate Professor, Department of Information

Science and Engineering, who rendered valuable assistance as the Internship coordinator.

I am grateful to acknowledge the guidance and encouragement given to me by Prof.

Shreedevi B C, Asst. professor, Department of Information Science and Engineering,
EPCET, Bangalore, who has rendered a valuable assistance.

I also extend my thanks to the entire faculty of the Department of Information Science and
Engineering, EPCET, Bangalore, who have encouraged me throughout the course of the
Internship.

Last, but not the least, I would like to thank my family and friends for their inputs to improve
the Internship.

Name: USHA S

USN:1EP20IS096
 ABSTRACT

In this tutorial we will build a YouTube clone step by step. You'll learn how to create
layouts and add content to those layouts. If you have been struggling to build a real website
with HTML & CSS, this is the article for you. Because I am about to teach you to do it step
by step to reduce your struggle. We'll discuss how to make the layout of the YouTube clone
with HTML and CSS and you'll learn how to make a two-column layout. Just wait: If you're
a total beginner and you don't even understand the difference between HTML and CSS, you
can check out the video below to learn everything you need to get started. It's important to
break things into smaller pieces to make our projects easier to build. So, we have to break
this YouTube clone into smaller units that we'll be building step by step.
 TABLE OF CONTENTS

CHAPTER TITLE PAGENO.

NO.
1 ABOUT THE COMPANY. 1-2

2 OBJECTIVE OF INTERNSHIP 3

3 INTRODUCTION TO FULLSTACK WEB DEVELOPMENT 4-6

3.1 INTRODUCTION 4
3.2 HISTORY OF FULLSTACK WEB DEVELOPMENT 4
3.3 THE CHALLENGES FACING 5
3.4 SOURCES OF FULLSTACK WEB DEVELOPMENT 5-6
4 INTRODUCTION TO GOOGLE COLAB 7
5 REQUIREMENTS ANALYSIS 8-10
6 YOUTUBE CLONE BREAKDOWN 11-20
6.1 YOUTUBE CLONE LAYOUT 12
6.2 HOW TO ADD CONTENT 17
7 ADD CONTENT TO SIDEBAR 21-27
7.1 CONTENT 21
7.2 ADD VIDEOS 24
7.3 OUTPUT 28
8 SOFTWARE REQUIREMENTS 29
CONCLUSION
REFERENCES
 LIST OF FIGURES

Fig.No. Description Page No.

5.1 Hierarchy of react components 9

5.2 Flowchart 10

6.1 Youtube website 11

6.2 Youtube clone layout 15

6.3 Youtube Header Section 19

7.1 Youtube sidebar 22
7.2 Youtube content section 26

7.3 Output 27
CERTIFICATE
The Youtube Clone 18CSI85

CHAPTER 1

ABOUT THE COMPANY

Inventeron is a pioneer Technical Training institute turned EdTech Platform offering Technology
educational services for over 25 years. A division of Inventeron Software International Ltd,
Inventeron was established with an ambitious vision of bridging the gap between the technology
academia and the industry. The team continuously strives to be an organization that brings
together technology and education, empowering aspiring professionals to seek assured
placements and a lucrative career path. Inventeron offers training to Graduates – under the
Finishing School Model, Industry connects University programs, Upskilling programs for
Working Professionals, and Customized training to Corporate & Defence sectors. Inventeron’s
high- impact hands-on technology training catapults engineering students, graduates, and working
professionals to be quickly employable in Niche high-end engineering Fields.

The in-house placement team further ensures that these students get placed in leading corporate
firms – with whom Inventeron has decades-old relationships. They stand by principle – We
Assist Until We Place. Being a trusted recruitment & training partner with Corporate, they
engage with them for the “Hire, Train & Deploy” Model.

The competitive advantage is the Inventeron offers an array of high-end technology training in
Embedded & Automotive Systems, C, C++, MATLAB, RTOS, Linux, LDD, BSP, Embedded
Testing, IoT Architecture, Protocols – Edge node Computing, Gateway & Security with
industrial IoT, DSP & MATLAB, VLSI design, Java technologies, Cloud Computing, Azure,
Python, Data Science & Analytics, Tableau, Artificial Intelligence with Machine Learning, Deep
Learning, NLP, Business Intelligence and more The Learning Approach Model is EEE –
Educate, Evolve, Employment through Pedagogical practices that integrate Learning
Management Systems (LMSS). They continuously aim for participants satisfaction and
placement commitment through focused Training by our Subject-Matter Experts and

DEPT of ISE, 2023-2024 Page 1

EPCET
The Youtube Clone 18CSI85

Professionals.

DEPT of ISE, 2023-2024 Page 2

EPCET
The Youtube Clone 18CSI85

Core Values:

In performing its mission, Inventeron to these core values:

• Embrace integrity and ethical conduct.

• Embrace diversity and respect the dignity and culture of all people.

• Nurture and treasure the environment and our natural and man-made resources.

• Facilitate the development, dissemination and application of engineering knowledge.

• Promote the benefits of continuing education and of engineering education.

• Respect and document engineering historywhile continually embracing change.

• Promote the technical and societal contribution of engineer.

Our Vision:

Inventeron is to serve diverse global communities by advancing, disseminating and applying

engineering knowledge for improving the quality of life; and communicating the excitement of
engineering.

Our Mission:

Inventeron aims to be the essential resource for mechanical, civil engineers and other technical
professionals throughout the world for solutions that benefit humankind.

DEPT of ISE, 2023-2024 Page 3

EPCET
The Youtube Clone 18CSI85

CHAPTER 2

OBJECTIVE OF INTERNSHIP

Internships help us to connect the dots between theory and practical work experience. The main
objective of internship is to get handful of work experience during a limited time. The main
purpose is to familiarize on a particular Subject or a topic that we have learned from the
classrooms.

During this course I became familiar with Full Stack Web Development using HTML, CSS,
JavaScript, Data Pre-processing. It also gives an Idea to know the applications of Full Stack Web
Development and where to apply them on a real time System.

From this Internship, one can develop skills in communication, Group discussion, Teamwork and
many more. Moreover, we can get an overview of Industry process in product development that
helped us to develop and build mini projects and converted into a product. From this, it also
provides an opportunity to see how classroom and textbook learning applies to the real world.

The Student will be able to get Good moral values on responsibility, commitment, teamwork,
trustworthy during training among other student.

DEPT of ISE, 2023-2024 Page 4

EPCET
The Youtube Clone 18CSI85

CHAPTER 3

INTRODUCTION TO FULLSTACK WEB DEVELOPMENT

3.1 Introduction

Full stack development is any application has a frontend (user-facing) component and a backend
(database and logic) component. The frontend contains the user interface and code related to user
interactions with the application. Full-stack developers are the full-stack of technology that
makes up a website. They are proficient in both frontend and backend languages and
frameworks, as well as in server, network and hosting environments. This type of website mainly
consists of three parts The back end portion is built by using some libraries, frameworks, and
languages which are discussed below: PHP: PHP is a server-side scripting language designed
specifically for web development. A full stack developer can make a fully functioning web
application. These website developers have some knowledge of both the back end (server side)
and front end (client side). Full stack developers need little or no outside help in their work. This
makes them especially valuable to employers.

3.2 History of Full Stack Web Development

Randy Schmidt in 2008. Earlier to this, the term in a different capacity was regularly used in the
1970s as well as 80s. managing director of Burns & McDonnell Terminals and Pipelines, used the
term to describe web developers who could do design, styling, markup, and programming. The
term has become common among programmers. They are skilled in HTML, CSS, JavaScript, Node
JS, Express JS, Django, and PHP. Equally, full-stack developers understand various database
management systems (DBMS) like MySQL, PostgreSQL, MongoDB, and more. As new
technologies continue to emerge and the digital landscape evolves, the demand for skilled full stack
developers will only increase. Picture this: you're not just building websites or applications; you're
crafting entire experiences from the ground up. Since is one of the leading programming languages
for modern back end web development, it's equally valuable for those interested in full stack
development. The language is favored not only for its versatility, but also for its relative simplicity.

DEPT of ISE, 2023-2024 Page 5

EPCET
The Youtube Clone 18CSI85

3.3 The Challenges Facing in Full Stack Web Development

Despite the breadth of their skills, full-stack developers are not all the same. An all-or-nothing
hiring strategy will result in a misalignment of talent. The assumption that a full-stack developer
should be able to perform all tasks is made far too frequently by recruiters and hiring managers,
who fail to recognize that some full-stack roles necessitate specialization in addition to a thorough
understanding of the complete software chain. Even if a company is aware of the particular
requirements for a full-stack developer role, evaluating a tailored combination using all these
distinct stacks and technologies is no easy task. Since every firm has a unique technological
stack, full-stack assessments call for a high level of customization. For instance, depending on
the framework and database the company utilizes, the job of a full-stack Python developer may
occasionally call for Django + MySQL, Flask + PostgreSQL, or Django + MongoDB. All of these
various tech amalgamations must be supported by a thorough full-stack evaluation.

3.4 Sources of Full Stack Web Development

The sources of full stack web development consist of many approaches, the type of data they
input and output, and the type of task or problem that they are intended to solve. Sources of Full
Stack Web Development are as fallows:

i. Python

i. HTML and CSS

ii. JavaScript

iv. Node JS, etc

Full Stack Web Development enables analysis of massive quantities of data. While it generally
delivers faster, more accurate results in order to identify profitable opportunities or dangerous
risks, it may also require additional time and resources to train it properly.

DEPT of ISE, 2023-2024 Page 6

EPCET
The Youtube Clone 18CSI85

1. Python

Full-Stack Python. Python comprises various libraries suitable for the front-end and back-end.
Most often, Python is completed with MongoDB and MySQL Since Python is one of the leading
programming languages for modern back end web development, it's equally valuable for those
interested Python is dynamically typed and garbage-collected. It supports multiple programming
paradigms, including structured, object-oriented and functional programming.

2. HTML AND CSS

A full-stack web developer is a person who can develop both client and server software. The
front end portion is built by using some languages which are discussed below: HTML: HTML
stands for Hyper Text Markup Language. It is used to design the front end portion of web pages
using markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. CSS. Along with JavaScript and
HTML, CSS (Cascading Style Sheets) is consistently one of the most-used coding languages in
front end development

3. JavaScript

JavaScript, often abbreviated as JS, is a programming language and core technology of the Web,
alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage
behavior. Web browsers have a dedicated JavaScript engine that executes the client code.
JavaScript is another consistently valuable coding skill in full stack development, ranking
beneath Python as the second-most desired language amongst Stack Understanding the core
concepts of JavaScript is essential to working on the frontend.

4. Node JS

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on

Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and
executes JavaScript code outside a web browser. Node js lets developers use JavaScript to write
command-linetoolsandserver-side-scripting.

DEPT of ISE, 2023-2024 Page 7

EPCET
 The Youtube Clone 18CSI85

CHAPTER 4

INTRODUCTION TO YT-CLONE

YouTube is a global online video sharing and social media platform headquartered in San
Bruno, California. It was launched on February 14, 2005, by Steve Chen, Chad Hurley,
and Jawed Karim. It is owned by Google and is the second most visited website, after
Google Search. YouTube has more than 2.5 billion monthly users, who collectively watch
more than one billion hours of videos each day. As of May 2019, videos were being
uploaded at a rate of more than 500 hours of content per minute.

In October 2006, YouTube was bought by Google for $1.65 billion. Google's ownership of
YouTube expanded the site's business model, expanding from generating revenue from
advertisements alone to offering paid content such as movies and exclusive content
produced by YouTube. It also offers YouTube Premium, a paid subscription option for
watching content without ads. YouTube also approved creators to participate in Google's
AdSense program, which seeks to generate more revenue for both parties. YouTube
reported revenue of $29.2 billion in 2022. In 2021, YouTube's annual advertising revenue
increased to $28.8 billion, an increase in revenue of 9 billion from the previous year.

Since its purchase by Google, YouTube has expanded beyond the core website into mobile
apps, network television, and the ability to link with other platforms. Video categories on
YouTube include music videos, video clips, news, short films, feature films, songs,
documentaries, movie trailers, teasers, live streams, vlogs, and more. Most content is
generated by individuals, including collaborations between YouTubers and corporate
sponsors.

DEPT of ISE, 2023-2024 Page 8

EPCET
 The Youtube Clone 18CSI85

CHAPTER 5

REQUIREMENTS ANALYSIS

Node js and npm (node package manager):

Node.js actually provides a runtime environment to execute JavaScript code from outside a
browser. NPM, the default package manager for Node Js is used for managing and sharing
the packages for any JavaScript projects. React uses Node.js and NPM for the management
of dependencies and runtime.

We can install node js form the official website https://nodejs.org

Then we just have to follow the instructions on the installation dialog box and node js is
installed. To check if the installation was successful or not you can run this command in
yourterminal/command prompt:

node –v and npm –v

To fetch api data from Youtube API:

 Head over to the Google developers console

 Create a new project by clicking on Select project drop down right next to
thelogo. Click the New Project button an give it a speaking name.
 Select your project by choosing it in the Select Dropdown directly next to the
logo inthe header.
 Click the Enable APIs and Services button

 Search for youtube data

 Click on the Youtube Data API v3

 Click the blue enable button

 In the dashboard, click Credentials on the left sidebar

DEPT of ISE, 2023-2024 Page 9

EPCET
 The Youtube Clone 18CSI85

 Which API are you using: Youtube Data API v3

 Where will you be calling the API from: Web browser

 What data are you accessing: Public data

 Click the What credentials do I need button

 Copy the KEY, and paste it into src/api/youtube.js

RUN THE PROJECT:

To run the project we need to write the command npm start it automatically opens in a
default browser at http:localhost:3000 by default, and whenever you change something in
the code and save it it automatically reloads the page and renders the new code

5.1. Hierarchy of react components

DEPT of ISE, 2023-2024 Page

EPCET 10
 The Youtube Clone 18CSI85

This mini project was divided into a set of react components. The App.js component renderstwo
components namely Header and Video Module. The header component has a fixed header styling
with a input search type textbox and having two buttons i.e. search and sort on the right of it. Search
button allows you to search for videos based on your query typed in the search field. And a sort
button helps you to sort the results based on a few factors like:relevance, date, rating, title, video
count and view count.

5.2. Flowchart

DEPT of ISE, 2023-2024 Page 11

EPCET
 The Youtube Clone 18CSI85

CHAPTER 6

YOUTUBE CLONE BREAKDOWN:

In the YouTube clone we'll be building, the website has about 6 units:

6.1. youtube website

The Header contains three sections (left, center and right). The left section contains the logo and
menu, the center contains the search box and an icon, and the right contains navigation icons. The
icons are based on similar elements, which means that we design an icon element and then copy,
paste, and edit it to create the others The Main body contains two sections (sidebar and content).
The navigation links in the sidebar are also similar, so they are just one thing. The same thing
happens to the videos in the content section.

DEPT of ISE, 2023-2024 Page 13

EPCET
 The Youtube Clone 18CSI85

6.1 YOUTUBE CLONE LAYOUT:

The first thing we have to do is create the layout structure of the YouTube clone with
HTML.We'll do that with the below code:

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Material Icons -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!-- CSS File -->

<link rel="stylesheet" href="styles/index.css" />

<title>Youtube Clone with HTML & CSS</title>

</head>

<body>

<header class="header">.</header>

<main>

<div class="side-bar">.</div>

<div class="content">.</div>
</main>

<!-- Main Body Ends -->

</body>
</html>

DEPT of ISE, 2023-2024 Page 14

EPCET
 The Youtube Clone 18CSI85

The header class name is used to select (or connect to) the header section of our website so
that we can add some styles to it.

We set its display property to flex to create a layout out of it, and then we can easily divide
itinto sections. We will divide it into sections later.

Justify-content: space-between means we want the contents in the header to have space
between them once there are more than one.

Align-items: center is used to move all the contents of the header to the center-left of your
screen. That is called vertical alignment. We finally set the height of the header to 60px
and its padding to 15px.

height: calc(100vh -

70px);display: flex;

background-color: #f9f9f9;

We set the height of the main section to calc( 100vh - 70px)...What does it mean? V stands
for a viewport, which is the visible part of a window’s screen without scrolling. “height”
means vertical length, and we can also use “w” which means width - horizontal length.

In short, 100vh means the total height that is visible in a browser without scrolling. And
we use calc ( 100vh - 70px) to run a calculation that subtract 70px from 100vh.

We set its display property to flex to create a layout out of it. Finally, we set its
background color to #f9f99f which is a kind of silver or ash.
/* Sidebar */

.side-bar {
height: 100%;

DEPT of ISE, 2023-2024 Page 15

EPCET
 The Youtube Clone 18CSI85

width: 17%;

background-color:

white;overflow-y:

hidden;

}
The height of the side-bar is set to 100% of its parent. That means it will have the same
height as its parent. Its width is set to 17% of its parent and background color set to white.

Hey! What is overflow-y: hidden? When Twitter loads 10 tweets at once, you can’t see
everything at once and you have to scroll, right? In this case, we hide the scroll bar.
Gracias!
@media (max-width: 768px) {

.side-bar {

display:

none;

}
We use this media query to make a website responsive on mobile, tablets, and desktop.
When the YouTube clone is on a device whose screen is less than or equal to 768px (like
mobile & tablet), the sidebar will disappear. Also, max-width: 768px means that a device’s
screen can be less or equal to 768px.

Alright, we have built the layout of our YouTube clone. Below is the result.

DEPT of ISE, 2023-2024 Page 16

EPCET
The Youtube Clone 18CSI85

6.2. Youtube clone layout

DEPT of ISE, 2023-2024 Page 17

EPCET
 The Youtube Clone 18CSI85

6.2 How to Add Content to the Header Section:

In this part, we are going to discuss how to divide an element into sections and add content
to the header section.

In short, we are dividing the header section of the YouTube clone into three sections:
left,center, and right. And each of the sections contains some tags. Let's get started!
Here, we will simply add HTML tags to the header section of the YouTube Clone. We'll
dojust that with the code below:

Step 1: Add children and grandchildren to the header

<header>
<div class="logo left">
<i id="menu" class="material-icons">menu</i>
<img src="https://www.freecodecamp.org/news/content/images/2022/01/yt-logo.png">
</div>
<div class="search center">
<form action="">
<input type="text" placeholder="Search" />
<button><i class="material-icons">search</i></button>
</form>
<i class="material-icons mic">mic</i>
</div>
<div class="icons right">
<i class="material-icons">videocam</i>
<i class="material-icons">apps</i>
<i class="material-icons">notifications</i>
<i class="material-icons display-this">account_circle</i>
</div>
</header>

DEPT of ISE, 2023-2024 Page 17

EPCET
 The Youtube Clone 18CSI85

After dividing the header into three sections by adding three separate blocks of code, it is
time to use CSS to make it more beautiful. Let’s get started.

Step 2: Style the left section

.left {

Display: flex;
align-items: center; }
.left {
padding: 0 7px;
cursor:pointe;
}

Don’t forget, we set the justify-content property of the header to space-between, which
means there will be equal space between every tag in the header.

Now, we gave a class left because it should be to the left side. We set its display property to
flex to create sections with the layout out of it. Its children are aligned to the left-center of
the header. We also access the menu that is inside the left section with its id. We set its
padding top and bottom to 0 and its padding left and right to 7px.Its cursor property is set
to the pointer so that when the mouse is on it, it will show a pointing finger.

Step 4: Style the input in the search form

.Search input {

width:600p;

padding:10;

border: 0;

height: 100%;
border-radius: 2px 0 0 2px
}
input:focus
{

DEPT of ISE, 2023-2024 Page 18

EPCET
 The Youtube Clone 18CSI85

outline:non;

border: 1px solid #ddd;

}
We select the input which is inside the search section with search input. We set its border-
radius to 2px top, 0 right, 0 bottom, and 2px left. Then, what is border-radius? It is the
curved edges of an object with four angles.

Step 5: Style the search and mic icons/buttons

.searchbutton

height: 100%;

width: 60px;

border:none;{

.mic {

margin-top: 10px;
The button inside the search section is also selected with the search button. Its height is set
to 100% of its parent. We don’t want it to have any border so we set its border to 0. We
access the microphone icon with its class name mic and set its margin-top to 10px sothat
it will move down a bit.

Finally, let's style all the material-icons we have on the web page:
.material-icons
{
color: rgb(100, 100,
100); padding: 0.7px
cursor: pointer;
}
We have added children and sections to the header of the YouTube clone. Check outthe final result
below:

DEPT of ISE, 2023-2024 Page 19

EPCET
The Youtube Clone 18CSI85

6.3. Youtube Header Section

DEPT of ISE, 2023-2024 Page 20

EPCET
 The Youtube Clone 18CSI85

CHAPTER 7

7.1 How to Add Content to the Sidebar:

In this part, we are going to discuss how to add navigation links to the YouTube clone.
Inshort, we will add a bunch of links to the existing sidebar.
Step 1: Add children and grandchildren to the sidebar.
<!-- <div class=”side-bar”> -->
<div class="nav">
<a class="nav-link active">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</div>
<!-- </div> -->

Then, we need to first style the navbar, which is the wrapper for all the links:

.nav {
Width:100%;
Display: flex;
Flex direction:
column;
Margin bottom:15px;
Margin top: 15px;
}

The only thing I will explain here is flex-direction. This determines whether we want the
children to appear in a column (vertical) or row (horizontal). In this case we go with a
horizontal display.

Then, let's style the nav-link above with CSS as shown below:
.nav-link {
Display: flex;
Align-elements: center;
Padding: 12px 25px;

DEPT of ISE, 2023-2024 Page 21

EPCET
 The Youtube Clone 18CSI85

}
.nav-link span{

margin-left:15px;

.nav-link: hover{

Background:

#e5e5e5

cursor: pointer; }

.active {
background: #e5e5e5;

}
hr {

height: 1px;
background-color:

#e5e5e5;

border: none;

<!-- <div

class="nav">hr -->

<i class="material-icons">library_add_check</i>

<span>Library</span>

</a>
<a class="nav-link">

<i class="material-icons">history</i>
<span>History</span>

DEPT of ISE, 2023-2024 Page 22

EPCET
 The Youtube Clone 18CSI85

</a>

DEPT of ISE, 2023-2024 Page 23

EPCET
 The Youtube Clone 18CSI85

<a class="nav-link">

<i class="material-icons">play_arrow</i>

<span>Your Videos</span>
</a>
<a class="nav-link">

<i class="material-icons">watch_later</i>

<span>Watch Later</span>

</a>
<a class="nav-link">

<i class="material-icons">thumb_up</i>

<span>Liked Videos</span>
</a>
<!-- </div> -->

7.1. Youtube sidebar

DEPT of ISE, 2023-2024 Page 24

EPCET
 The Youtube Clone 18CSI85

7.2 How to Add Videos to the Content Section

In this part of the YouTube Clone tutorial, we will add videos to the content area. You need
to duplicate video (not videos) into many places to make it look like Youtube and you can
edit them with unique Youtube video information if it's available.
<div class="videos">
<!-- a video starts -->

<div class="video">

<div class="thumbnail">

<img src="https://img.youtube.com/vi/zUwB_imVjmg/maxresdefault.jpg" alt="" />

</div>
<div class="details">

<div class="author">

<img src="https://yt3.ggpht.com/bpzY-
S4DYlbTeOpY5hIA7qz_hcbMkgvLAugtwKBGTTImNnWAGudX0y53bo_fJZ0auypxrW
kUiw=s88-c-k-c0x00ffffff-no-rj" alt="" />

</div>

<div class="title">

<h3>
</h3>

<a href="">

</a>

<span> 2M Views • 3 Months Ago </span>

</div>

</div>
</div>
DEPT of ISE, 2023-2024 Page 25
EPCET
 The Youtube Clone 18CSI85

<!-- a video Ends -->

</div>
.content {
Background color: #f9f9f9;
Width: 100%;
Height: 100%;
Padding: 15px 15px;
Border-top: 1px solid #ddd;
Overflow y: scrool;
}
.video {
Width: 270px;
Margin-bottom: 30px;
}
.thumbnail {
Height: 100%;
Width: 170%;
.thumbnail image
{ Object-fit: cover;
Height: 94%;
Width: 100%;
}
.author image {
Object-fit: cover;
Border-radius: 50%;
Height: 40px;
Width: 40px;
Margin-right:10px;
}
.details {
Display: flex;
}
.title {
Display: flex;
Flex-direction: column;
.title h3 {
Color: rgb(3,3,3);

Line-hight:18px;

Front size: 14px;

DEPT of ISE, 2023-2024 Page 26

EPCET
 The Youtube Clone 18CSI85

Margin-bottom: 6px;

.title a, span{

Text-decoration: none;

Color: rgb(96,96,96);

Front-size: 12px ;

In this case, we make a layout out of details and because we don’t set its flex-direction to
property, it will be set to row – which is its default value. You see that a layout is also made
out of the title and set its children to appear in a column by setting flex-direction to column.
We select the h3 tag that is inside title and we set its color to somewhat black…I will
explain how to understand the color code later. Line-height is used to set the height of a line
of text and in this case, we set it to 18px.

Finally we use title a, span to select the anchor tag in title. We also select all span tags on
the page and set their text-decoration to none. The only thing you may not understand
above because we haven’t explained it before is object-fit: cover. object-fit in this case is
used to clip the image to its container so as to remove overflow (areas where the image
is bigger than its container)

So what is text decoration? It has a design such as an underline that an anchor tag has, and
we hide it in this case by setting it to none. We have added videos to the YouTube Clone
and the final result is below:

DEPT of ISE, 2023-2024 Page 27

EPCET
The Youtube Clone 18CSI85

7.2. Youtube content section

DEPT of ISE, 2023-2024 Page 28

EPCET
 The Youtube Clone 18CSI85

7.3 OUTPUT:

7.3. Youtube Home

DEPT of ISE, 2023-2024 Page 29

EPCET
The Youtube Clone 18CSI85

CHAPTER 8

System Requirement

System requirements are the configuration that a system must have in order for a hardware or
software application to run smoothly and efficiently. Failure to meet these requirements can
result in installation problems or performance problems. The former may prevent a device or
application from getting installed, whereas the latter may cause a product to malfunction or
perform below expectations or even hang or crash.

 Software Requirements:
• Operating System : Windows XP and above.
• Scripting Language : HTML
• Browser : Chrome, Firefox, or any other.

 Hardware Requirements:
• Processor : 1.5 GHz Intel Pentium Processor or above
• Memory : Minimum 4GB RAM

DEPT of ISE, 2023-2024 Page 30

EPCET
 CONCLUSION

Building this project helped me solidify my knowledge in the main concepts of HTML,
JSS, CSS. This project will include React components, lifecycle methods, state
management, passing props from parent to child components, API request and much more.
Thus, it was a great overall learning experience. If you're a total beginner and you don't
even understand the difference between HTML and CSS, you can check out the video
below to learn everything you need to get started. It's important to break things into smaller
pieces to make our projects easier to build. So, we have to break this YouTube clone into
smaller units that we'll be building step by step.
 REFERENCES

Web Reference:

[1] https://developers.google.com/youtube/v3
[2] https://scrimba.com/g/glearnreact
[3] https://www.techomoro.com/how-to-install-and-setup-a-react-app-onwindows-10/
[4] https://scrimba.com/g/gintrotojavascript
[5] https://reactjs.org/docs/faq-internals.html
[6] https://developers.google.com/apis-explorer
[7] https://scrimba.com/g/glearnreact