Hello there, I am trying to build a webpage that uses YouTube's API along with JavaScript, HTML and CSS. My webpage needs to create a new unit of time based on the average length of my favorite YouTuber's 20 most recent videos thus allowing me to calculate how many videos could be watched in an hour. I already have an API key needed to make requests, but I have no idea how to use/implement the YouTube API to accomplish the previous goal. The second part of the assignment (which I do NOT need help with) is that I had to research and use another .js library and implement it into the page. I used video.js to import a personal video file, but you don't need to worry about any of that. That code can stay as is for now. Thanks again for your help. I am going mad trying to figure this all out.

The HTML:

• Home
• Youtube
• Using Youtube's API

Useful JavaScript Using Youtube's API

Helpful Resources:

• Linus Tech Tips
• PC Part Picker
• Newegg
• Userbenchmark

How many videos can be watched in an hour?

The amount of videos that can be watched in an hour is:

Below is one of my videos posted to youtube, but directly loaded from my included files instead using video.js:

poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

The CSS:

html{

background-color: white;

}

body {

margin: 0 40px 0 40px;

background-color: white;

}

ul.nav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: black;

}

li.link a {

color: blue;

font-family: Helvetica, Helvetica,Verdana,Arial,sans-serif;

}

li.nav a {

float: right;

display: block;

color: white;

font-family: Helvetica, Helvetica,Verdana,Arial,sans-serif;

text-align: center;

padding: 10px 16px;

text-decoration: none;

text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

text-transform: uppercase;

font-size: 13px;

}

/* Change the link color to #111 (orange) on hover */

li.nav a:hover {

background-color: red;

}

.sidebar {

grid-area: sidebar;

}

.content {

grid-area: content;

}

.header {

grid-area: header;

color: white;

text-align: center;

}

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: 200px 1fr 1fr;

grid-template-areas:

"header header header"

"sidebar content content";

background-color: white;

color: #444;

}

.box {

background-color: #444;

color: black;

padding: 20px;

}

.header{

background-color: red;

color: white;

}

.content{

background-color: hsl(0, 0%, 98%);

}

.sidebar{

background-color: hsl(0, 0%, 95%);

}

img.center{

margin: 0 auto 0 auto;

display: block;

}

.item{

text-align: center;

}

h2{

text-align: center;

}

@media screen and (min-width:200px) and (max-width: 479px) {

.wrapper{

grid-template-columns: 200px 1fr 1fr;

grid-template-areas:

"header header header"

"content content content"

"sidebar sidebar sidebar";

}

.sidebar {

grid-area: sidebar;

}

} /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

@media screen and (min-width:480px) and (max-width: 599px) {

.wrapper{

grid-template-columns: 200px 1fr 1fr;

grid-template-areas:

"header header header"

"content content content"

"sidebar sidebar sidebar";

}

.sidebar {

grid-area: sidebar;

}

} /* smartphones, Android phones, landscape iPhone */

@media screen and (min-width:600px) and (max-width: 800px) {

} /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

@media screen and (min-width:801px) and (max-width: 1000px) {

}

/* tablet, landscape iPad, lo-res laptops ands desktops */

@media screen and (min-width:1001px) and (max-width:1280px){

}

/* big landscape tablets, laptops, and desktops */

@media screen and (min-width:1281px)and (max-width: 1920px) {

/* hi-res laptops and desktops */

}

@media screen and (min-width:1921px)and (max-width: 3840px) {

/* hi-res laptops and desktops */

}

I don't have any JavaScript written so far, because I wasn't sure where to start with the YouTube API.