Code your own YouTube app: YouTube API + HTML + CSS + JavaScript (full tutorial)

Key Takeaways

hey guys welcome to this series on how to make a youtube playlist app using the youtube api okay guys so here we have the app that we're going to be creating today simple youtube playlist app that pulls in all the information using the youtube api including these thumbnails here the title description uh even the video so basically what it does is i've created a playlist here on my youtube channel and the link for all the stuff i give you links for all will be in the description um and there's 12 videos in here so this playlist uh will be pulled into our app you can see the order is the same in our app here i always pulled in using the youtube api right cool so let's get started so the first thing we want to do uh we probably want to create a central div here in the middle where it's white and then this div is built into sections so there's a header another section and the main bit um so let's build that section so jump into youtube into codepen um first thing i just want you to check that you have a few things ready so jump into the settings cog at the side of the css and make sure you have normal eyes and auto prefix on these will just help your uh the app just look the way it should in different applications save and close that and we're ready to go so let's create uh this central div and we're using emmet again so instead of writing div div with a class equals container etc we're just going to say dot container and hit the tab button and there we go it's written the div out for us so inside the container we have the header where the logo sits so we can just say header tab and we have a section where the video sits so we're going to say section then we're going to say video and hit tab and emmet has given us a section um tag because we just said section there was no dot or hash in front of that but then we followed it with hash video so that said hey the id is going to be video because hashes id then we're going to have a main section right where all the uh all the list type items are so let's start by [Music] giving the background its color so body we want a background a color of eee so very slightly darker white basically that's because our container um is white so let's um give it a width of 560 pixels uh let's give it a height of 100 view hey of viewport high vh right and what that means is all the visible area of the screen so not when you scroll down or sideways this is the viewport this is what you can view so 100 vh is 100 of the screen and vw is view width so that's 100 widthways right we still can't see it so let's give it a background color background color of hash ffff so that's the same as saying hash f free time i have six times are writing white so now we can see we've got a little bit of a bit of a block here on the left let's put that down the middle by saying margin we want zero margin at the top and bottom but on the left and right we want it to be the same so that would center it because they have to be the same so that's auto cool so the next thing we should do is probably let's put this logo in here right so um i'll have the link uh to the logo in the description i'm just gonna copy it here um so we're going to say img because we use an emmet we want it to have a class so dot logo this is so in the css we can change it then hit tab we want then to fill out the src with the actual location of the image so here's the location for me and it's a bit too big so let's change that let's go to logo in the css let's change it to width 120 all pixels that's cool so that's getting better but if you notice on here when we scroll up this and the header the video on the header stays in the same place right and if we did that now you can see the youtube is disappearing so let's fix that before we go any further so i'm just going to go above the logo and say yo header tags i want you to stay fixed to the top so we say position fixed right doesn't look like it did that much but if i scroll now and i'm scrolling you can see the scroll bar here it's staying where it is right okay so let's make this image central send centralized we can do that by saying text align center right he says ah so we need to give it so it's centered so if i go background color red you'll see the actual background of it is only a small amount and we want it to be the full width right so we want it to be also 560 pixels because when you make something fixed you're taking out the floor of the document so normally with a div you go header main and it'll carry on going down the page one after another what fixed has done is it's taken out that flow and it's just saying hey i'm just going to stay at the top because you told me to so with that it has got rid of its width that it would inherit from the container it was in right so anything you'd inherit has got rid of so width 560 pixels and now that texture line works look if i take that off it goes across there because now it knows what width it has right that's good for now so let's put in that video right and the way you can get this video embedded you can do straight from youtube if i jump into youtube this is our playlist and i click on one of the videos and this is with any video right you go down here to let's zoom in a little bit uh share and click on that you'll see this embed and this is the whole link this is the whole code even to what we need so you can copy out there or i'll link it as well or whatever video you want and we can just basically inside this section of the id of video we can just paste that in there right but it looks a little bit funny right so the video is scrolling and we don't want that to happen and this header is kind of sitting on top of it so why don't we make this section the section uh the same position fixed as the header well it also needs the width the text line doesn't really matter to it so why don't we just tag on to here by saying call on section so now these have both the same things going on and then i scroll the video stays there but you can see that now the header has disappeared underneath it because in the html the section has come after the header so it says well we're the same we're both fixed the hierarchy is the same but i actually come lower down than you in the html so i'm going to sit on top of you so the way we can fix that is say okay header sorry okay section we actually need you to start lower down the page so we want you to at the top be 50 pixels away from the top and there we go just let it breathe a little bit how about we give some padding to this youtube logo so let's go to dot logo and say padding 10 pixels and it actually has 10 pixels on the left and the right as well but it doesn't affect it so we're going to leave it saves us writing out like zero pixels here right it's the same thing we don't need it so 10 pixels looking pretty good i scroll and it stays where it stays where it is right that's important okay so now on to the main section what we want to do here is we need an image and the details so we could probably fit these in just one container and split this container too right so we're going to do that very semantically jump into our html and we're going to create an article and hit tab an article is just a very semantic way of basically saying this is kind of the main container of what holds our content you can use in different ways but for this where we're going to use multiple articles so we know what they are they're an article right so what we need to do with the article then we need to give it two things it needs an image so img with a class of thumb hit tab and we're gonna fill in that source uh i've got a link here i'll leave you the link in the description and put that right here in the sauce and now you see a problem we'll carry on we also want a container a div with a class of i don't know details hit tab and then this div will have h4 that's going to hold our title and the p so the p tab and that's going to be our description so i am a description right so that's all the article needs to have right so it needs an image tag inside an article and a div with details inside of article as you can see it's right up here now and this the header doesn't seem to have a background so there's a couple of things we need to do jump into our css and for this header so this is header and section we can just give it a background color of that white color which is three f's hashtag free apps now it's disappeared but we know the article's still hiding back here so you've got to remember the article the main section this main section here is in the the flow of the page still now the section and this header i've jumped out of the main flow so effectively main is the first thing on the page that's still in the flow so that is at the top as well so what we can do then for that is we can give main some padding to bring it down looks like main curly brackets padding and we want to give it uh something like so it's got a big padding from the top so it's gonna be like 378 pixels from the top right but we also wanted to have some on the sides so 18 pixels uh and we don't want the bottom to be 370 so we can just give the bottom 10 pixels and if we end it there 18 pixels will work for left and right because we haven't specified the left side after the bottom and that's fine to do right so now it's actually visible the image is a little bit big so why don't we deal with that why don't we say the thumb because we give the image a class of thumb we want you to be height of 70 pixels all right that's looking pretty good and you can do it with if you want um but i think because some of the thumbnails are different aspect ratios so i think it just looks better that they're all the same height so that's what i did on this so we're getting there we're getting closer now now we need this div container here to be at the side here so we're going to do that by jumping into our article and we need to say yo article why don't you display as a flexbox container so display flex and as you can see it's coming the side of it it's a little bit disjointed right this is kind of down the reason is because these have their own margins and paddings the p and the h4 so let's pull them off now let's let's do some styling of the typography i'm going to do it at the top because i like to have my typography out of the way at the top so the way we do this we're going to use something in scss it's called mixing and basically what that does is it gives you some pre-arranged code which then you can use over and over again so it's kind of like um a variable but in css so to do this we want to basically say we're creating a mixing so at mixing then we're going to give it a name so we want to create a section of code called font base which we can then import into multiple um css blocks so we want to take off the padding right and we want to take off the margin and we want to do a few things we want to give it a line height of 1.3 which is basically if this paragraph carried on going down the the distance between the actual bottom of this line and top of the next line that's the line height so we've just increased it effectively by 0.3 and we want to then say font weight 600 to make it bold now you notice nothing happened here that's because we haven't called fontbase so let's do that we're saying hey h4 we want you to be uh to include fontbase so the way you do it you say at include so you're including it then just call the name front base you can see that just jumped up then because now it has the padding and everything else taken off it the p tag we also want that to be um including our font base so include font base and watch what it does boom there you go but now they're the same and in our visual this is gray and smaller so let's do gray and smaller then let's do that now so color which is how you get the font color just kind of call it gray because i know that's a good color and we want to make the text smaller so we're going to say font size um 0.7 rem there we go smaller uh and we're using rem which is the relative elements uh so it's relative to the browser default size so most browsers are 16 pixels default font size so we're saying b point seven of that right okay so it's not looking bad let's add a few more of these articles in here let's just copy and paste this article copy all right so just copy and paste the notes down the page uh here we go so we need to now start adjusting some some paddings right so the way we're going to do that is um our article so if we jump down to our article our article is only display flex at the moment so it needs a few things we want this this details to sit in the middle of kind of the whole article so we can say align items center and that that aligns centrally you see it just move down we need to give it some of that padding so we need to say padding we want to be padded at 8 pixels at the top and 12 pixels left and right so that's looking a bit closer um now we need a little bit more gap here notice how we have a little gap here so we want to do that on the video description right so we'll just go underneath the thumb to keep in the right thing so we want to say dot details we want to say yo dot details give us some padding you can give us eight pixels at the top and bottom and 22 pixels at the left and right side which pulls away cool it's looking very close so now we need to just do this hover right have this nice little blue hover over it so we can go into article and we can use another css um helper which is and or ampersand hover that basically says article will replace the and so in css you would normally say article hover you do it that way you don't need to do that in scss you can just say and hover and it knows you're dealing with whatever you're inside of because we're still inside of these curly brackets right so and hover so the articles hover we want to have a border of two pixels solid and we want this red color which is hash ff9999 right so now when we hover there you go but it's looking a little funky when we they're kind of moving about and that's because you're adding a border when you hover over it so yeah adding to the size of the article so what you can do is just say border this is on the article itself two pixels solid white or we can use that f f it's totally up to you it's the same so now it already has a board on it but you can't see it so when we hover over it it doesn't jump about now we need to round the edges of this little red container and our thumbnails so let's do that let's say border dash radius um 8 pixels for this little red thing there you go it's looking pretty cool and we want to do that on our thumbnail as well so let's say border dash radius let's say 4 pixels on this one okay so four pixels on that one and it's looking pretty good we're pretty close to the end i think um the only thing i want to do is i just want to add um i just want to add a margin zero auto to my article just so it's gonna always be in the middle of that main container and it should be anyway but um just to be sure right okay and there you have it we have a scrollable list the video stays where it is the header stays where it is and you can scroll down obviously we don't have to click functionality in yet that's going to be down in the javascript and the jquery in the next video but in the next video we're going to actually look at how to set up the api uh how to get an api key and how to make the calls and make all this information dynamic does mean we pull a bit of this information out of here um so you've wasted your time a little bit but not too much because when the result comes in you'll see how cool it is okay guys so quick refresher this is the application that we're making simple little app we can click on the items and the video changes at the top all this information is pulled dynamically from youtube and how we did that was i created a little playlist on youtube called youtube i've linked that as well so you can get straight to that playlist and this has 12 videos in it and what we are doing we're actually saying to youtube hey go get this playlist we want the image the title and the description and some video information so we can display it so let me show you first the youtube docs so here we are the link for this is in the description as well um and we're interested in playlist items and a list of those playlist items you can see on the left here but you can see there's all sorts here there's channels comments you can get comments from them subscriptions thumbnails lots of information we can pull from the youtube api so uh what we're going to do is we're going to have a little place i'm going to click on javascript here and i know there's different bits of information you can get i know we just want snippet so i'm just going to say yep text snippet we've got 12 videos but we can bring back 20 videos to our playlist and what we need to do is if we put in our playlist id here which is this for me i'll link i'll put this in the link as well so you can use it and if we click execute you can see here create a weather app using an api part one html we go down all the thumbnail stuff here again part two here and all the videos are listed here so it's made that request for us in the documentation so we can actually see if this is going to work and if the information coming back is what we actually want and it is so that's cool and it sends that request to this url here so we're going to do the same and to do that first of all we need the youtube api enabled and we also need an api key so effectively a password right so how we do that is i've given you a link to um this in in the in the description uh we need to go to let me find this really quick we're going to go to this which is your developers console right what's actually there so it should when you come here on the link on the developers console link it'll be something like this you might not have all these boxes but don't worry just yet what i need you to do is next to where it says google apis new project i need to click on there yours probably doesn't say new project but whatever is at the side of google apis click on it and click this little plus symbol right here right because you want to create a new project type whatever your project name is in i'm not going to do it because i already have one click create then that'll create it for you there might be a little bit of a time delay you might have to wait for it to go through the process of it but after a minute or so you should be able to then select your project from in here so i'm going to select new project and then we want to enable the youtube api so we'll do that by just clicking enable apis and services right here and searching so i'm going gonna search youtube and there's four apis here we want youtube data api v3 right because this is just getting provided information form such as videos playlists etc so click on that one and click the big blue enable button it'll do this spinny thing and it'll take a while to enable it again but once it's enabled what we need to do is we then need to get an api key which is effectively the password so if you watch the last video we did uh the weather app video you'll know that we could just send the request and get information back this time we don't have that ability we need to send with it our information so on the left hand side you can see credentials so just click that you see i've got one listed here already but you can create credentials right here this little blue thing and you want to create api key so click on that and there's a new api key right so you can just copy that out there and that's what we're going to be using okay so where do we start let's jump into our code and let's make this request let's just move this js right up here so we're using jquery so make sure we've got jquery installed by clicking the little cog at the side of the js which is the settings cog go to quick add at the bottom at the bottom you see i've got in my recent jquery you might have it down here just jquery there so click on that save and close and jquery is installed ready to use right so how do we start this off well we need to start off with a container for jquery to work in so we say dollar for hey jquery we're about to use you so he's saying when the document so that's the page is the document when that document is ready i want you to do something so doing something is a function curly brackets and that's the container for jquery right so now we can start running jquery stuff instead of just plain javascript which makes the api call a lot easier so what we want to do first is we want to just set it up so we have the information our fingertips to use later so let's set it up for using our api key so let's create a variable called key and what we want to do is we want to just copy and paste so copy and paste from your credentials your key we want to copy and paste that straight into our document into our variable here so that's my key now we also need the playlist id to send it to right so let's go and get that playlist id so if i go to the playlist so this is the actual playlist page look the way you can get the id is going to the address bar at the top and the last little bit where it says list equals after the equals that's the playlist id so let's copy that out there i'll put the link in the description for you let's call this var play oops play list i d equals and put that in quotes there we go playlist id now the last bit of information is where the api call um where the api call is right what are we actually sending the api call to so we go back to the documents the youtube docs and that was here look so we filled all this stuff in before this is the request http request i'll link this in the description also and what we can do is then just copy that i'll make another variable called uh url and we'll set it in between um quotes and there we go that's our three bits of information ready to get everything else going right and with these we've got one actual piece of information we also need to send with it which is the options so if you look back here um we we are sending a few bits of information we're sending snippet which basically gets those things like thumbnail title etc and max results so 20 whatever and a playlist id and when you send all this information to here along with your api key then it will send the response um but all these are options so we actually need to send that with the request so let's create another variable and in this variable call it options is going to be an object because this is what the youtube api expects to receive so it's an object um and the object is going to have um a few things so it's going to have that part and that part was called snippet right it also needs our key which we have at the top so we're just basically copying it into here now so key and we're gonna access the key variable to this place here it needs to know how many results we want so max results oops sorry max results um we said 20 but you know we have 12 in our playlist but it's maximum so it's fine and then we also need to know which playlist is going to um it's going to get the information for so all the stuff on the left is stuff um youtube has specified the names of so you see it all here you know parameters here playlist id max results tells you all about in the docs and we're just basically sending what i want so playlist id is coming straight from this variable right so on to the request so we want to say hey um let's let's create a function and it's going to load the vids right so it's going to load our videos load vids um and what that actually is going to do it's going to send a request so dollar so we're using jquery here so saying hey jquery um you have a function called get json let's use that it's already already built in it's a pre pre-made code um but i need a few bits of information with this so youtube needs a few bits of information it needs a url which we have we've already got that so url i also need a bunch of options including the key etcetera so we have that so we're going to say options and then it's going to take that from that variable um and after after i've sent the request and you give me the options um i'm going to return something so i need to do something so doing is a function so i'm going to do something after i return the data but you need to tell me what you want this data to be called so within this parentheses we're going to type data we can call this whatever we want um but it needs to be able to access it uh we need a name to be able to access it so let's console log this data right we also need to call the function so call it load vids so we're calling above it and the function is underneath right let's see what happens sex son so we'll inspect the elements so we can get to the console here we go in our console i just need to get to logs so here we are logs zoom in you see right here there's an object if we open this object you can see oh there's items in here oh from 0 to 11 so there's 12 items so this is going to be our information right snip it there we go we asked for that and it's telling us our channel titled channel title the playlist um create a weather app um thumbnails are in here as well um video ids in here so this has given us everything we need right here so what should we do first why don't we we'll just close this off why don't we dynamically change this video to the very first video in the playlist so instead of writing it out in html like this we can now get rid of the iframe so delete the iframe from uh your html because we're actually gonna create uh that dynamically from the api so how to do that well we need it to be um a new function right so we're going to call this i guess function function main vid and this main vid function is basically going to find the container for that which is section with an id of vid so it's going to find that and then it's going to inject something into it so let's say hey jquery dollar symbol find something called video i think that's called hashtag video so find something called hash video and what i want you to do is i want you to change the html that's within those tags to uh something something new right so i'm going to use backticks to do this um just going to make sure i've copied it correctly from here so ctrl x and basically backticks is allows us to inject variables directly into um into the string rather than having to close the string add a plus sign add a variable add another plus sign open a string up backticks not quotes they're backticks lets us just do that lets just even have spaces so line breaks and it doesn't affect it so lets just copy and paste our iframe from our html into the document right it's a bit of a long thing so we're kind of cool now right so i'm just gonna get rid of this this playlist information here actually um so it's actually ready to run so we just need to run this main main video function from inside here so basically saying make the api call then load this function called mainvid there you go then once mainvid is run find a video um section and inject this html but this isn't dynamic yet right because we have this hard-coded id here so what we need to do is and this is why we use backticks delete after it says embed forward slash delete that bit of code to the quotes right delete that and i want you to add dollar symbol curly brackets id just make sure your curly brackets end up closing so now it's looking for a variable called id so we need to supply it so what we need to do is we need to send id to it so we're sending id then we're going to name it here saying yo you're going to receive something called id so you can use it now we need to find the id of let's say the first let's say the second one because it's a different color we're going to find the actually we'll include the first one we need to find the id of the first video in the playlist so the way we do that is we say create a variable called id and set that equal to data um now we need to go find out where it is so inspect element let's go to console here's my logs again so data is object because this is what we named it so this is our very root element so data i mean to go into items this is because items is an array it's not an object so the zero f item in that array then this is not the video id and it's going to snip it then we need to go to resource id and video id so it's quite a long path so let's see if i remember data dot snippet dot oh so data dot items was it items um add the zero position then we want to jump inside snippet then there was the resource id then there was the video id right and that's what we want and there you go so we've created a variable called id which has got the video id passed it to mainvid then mainvid here has used it within the string so that's pretty cool right we're getting that dynamically now okay so the next thing to do we need to get all these filled out so we need to kind of say hey for each item in that array we want to do something so how we're going to do this we want to loop through each item in that array so let's create another function so that's the main video function let's create a function called results loop all right what results loop is going to do is it's going to basically add each one of these pre-made so it's not going to inject the thumbnail then inject the title then inject the description it's going to make this up here then put it in so we're going to make the html up in here so let's do that then so we're basically going to copy i'm going to cut one of these articles out so cut an article then you can actually delete every other one of the articles right we don't need the articles anymore so we've got one in our clipboard so what the results loop does is it says hey i want you to select um the main container so doing that with jquery so select the main container and what i need you to do is change the this is what not this is not what we're doing we're not changing the html but i'll show you i'll show you what you might think so we want to change the html using those back ticks instead of quotes a couple new lines and we want you to add this article thing right so if we call results loop now so we want to do the api call change the main video and once we change the main video we then want to add stuff to that that main section so we call result results i think loop from inside our call and there you go it's added one of those things so what we actually wanted to do is we want to say like okay so for each one of these um items we want you to add another one and another one right so the results loop needs to fill this information out with its dynamic data so let's send all the data to results loop so then results loop let's say look you're getting this data in now results loop wants to run through these things so it needs to create its own thumbnail so let's call var thumb and set that equal to well let's have a look inspect element so console let's have a look where it is so we need to go inside an item array and the thumbnail is inside inside items side snippet inside thumbnails right and we're going to take the the medium one i think yeah medium dense url right it's quite a long path so the thumbnail is called and we want to basically go into the data now we need to go into an item then we need to go into the snippet then into the foam nails then into the medium medium spell medium then into url now there's a problem with this so let's try and replace this url of the thumbnail which is in the sauce tag using you know delete it using dollar symbol curly brackets then putting the thumb in there then close curly brackets if you haven't closed them now it hasn't done it and the reason it's not done it is because item needed a position right because it was in an array because there's multiples of these things so if i did give it a position of zero it would pull that in so set the main variable form data item the zero position um where have i gone wrong here snippet item medium dot url so i inspect on this so object items the zeroth item snippets okay so items there we go so that will work right but i have to specify the location so what we need to do is for doing this for one item you don't want to be copying and changing this one we can use uh for each loop or in jquery it's just called an each loop so let's set up that each loop so we're saying hey jquery for each this is a jquery jquery built in function javascript does the same for each so it's saying for each data so the data you gave me so for each of the datums data in the items array now items already has multiple as has 12 right so we're saying for each of those 12 i want you to do something so function right so this is our function uh what i want to do is i is the number you're on so 0 1 2 all the way to 11 in our case i want you to go through and rename they're all called item now so i can access them same item so let's take this variable for call form let's move this inside and let's also take this main with the html right we'll take this cut that and we'll go inside here right so still doing the same thing but why don't we replace this zero we don't need that anymore we need to now say hey you're already looping through these items right so i'll let you do that so instead of writing data item zero if we just write item that's changed now it's only changed once so effectively it's looping through each of the items and changing the inner html so on the 11th time that's the last one so that's the last thing it does we don't want that to happen this is what i was saying earlier we want to not change the inner html we want to append a new bit of that onto the dom each time so change.html to dot append and see what it does there we go so now we need to fix that but now we have all the thumbnails at least so now we have the thumbnails let's do it for everything else so let's call var title we want to set the title equal to item dot snip it dot title because that's where it is in that object when we go look in the console so now title is that why don't we change what's in between the h4 tags let's delete where we wrote title dollar symbol curly brackets title and just make sure you finish recurve brackets you see all the titles are now dynamically here right same with description let's do that so var d-e-s-c equals item dot snippet dot description right then let's go into the p tag delete everything within the p tag dollar sign curly brackets d e s c closing curly brackets and there you have it but they're giant right we don't want that much of a description in these things so we can use javascript to remove everything over 100 characters right and how we do that is we say go to our desk variable and at the very end just before the semicolon just type dot sub sub string sorry lowercase sub string and it needs two arguments he needs to know where it starts so it starts at the very first letter zero and for how long so a hundred hundred letters there we are we've cut it down dramatically now so the only thing left to do is um when we click on one of these because at the moment doesn't do anything we need to update that video um and we actually need to pull some information from the api so it knows where to go so let's let's do that so let's say we're gonna actually say hey when the main is clicked on um find out what has been clicked on in that main and change the video so it looks a little something like this so select select the thing called main and when it is clicked so dot on so this is basically saying it's an event what event is it going to be so when it's clicked you can do something it's a function right and let me show you this so let's do alert hello hopefully it lets me do this in codepen so when i click on the main it should say hello right there you go and it's going to go through it 11 times maybe i didn't expect that so we don't want that to happen right because we could say when the article is clicked on but we we don't want to add multiple multiple event handlers for each item because we don't know how many items we're going to do and that's why we're using main so we're saying when we click on main what i actually want you to do is i want you to dig down to find the article element right because the article has the information we want right and don't forget the comma there before the function so we need to when it's clicked on we need to send some information back to the main video function right because that's what changes that video so we need to find the id of that video so whenever we click on one of these we need to find the id of that video but we haven't given these articles that id so we need to do that right so this is how we do that in this article so in our main top end we want to give it a class right um let's call it class item right and we also want to inject the video id into the article and this is how we do it we are making something called a data key and we want to say hey curly doll symbol curly brackets vid and your curly brackets and your quotes so what's happening here is we have now made this extra um calling for a vid variable so let's create that vavvid equals and what does the vid equal it actually equals the video id right so let's let's put that into item dot snippet dot resource i d dot video id now that's where the the video id is in if your console logged it that's where it is right so now this data key holds the video id so if we go back to this event listener that we're making where we can click on the main it will dig down to the article and now it's digged its way down to the article we can pull in pull out that video id because it's stored in the data key of the article right so let's create a variable called id and id wants to be you want to basically select this element so we've clicked on it it's dug down to the article so select this and select this items basically this articles um element called data dash key right so select that data key right which will be individual for each video and we could then say um why don't you alert why don't we alert the id so let's see so hopefully this works so when i click on this one it's giving me this id lock and it's going to go for them it's going to go through it 11 times okay brilliant that is sorry that is because let's do let's fix this now shall we that is because we have written this main this is my fault i should have been clearer so this whole on click um event event listener we've written this inside this append right so we've written inside this each loop and we don't want it inside that each loop in fact we want this just out on its own so copy it so alert id is your last thing you have curly brackets and a parentheses and a colon cut that out right so that was my bad so that can actually live right down at the bottom just leave your jquery container stuff clear so i'm just going to delete some of this space and just copy and paste it in there right looking better right cool so now when i click on one of these it shouldn't do it 11 times once there we go so that's because i wrote this accidentally still inside of this each loop so i've seen okay each time i click on the main oh sorry for when i click on the main for each one of these items i want you to alert and that's what it was doing that's why it kept going on and going on so now we don't want to alert the id what we want to do is we want to call this main video because we can pass in an id and the id will change and it will update the html it will update the video right so let's call it let's call main vid and let's send that new variable this data key ascend it in its parentheses to that function again this should be we should be very close here so when i click on this here we go now it's changing and that's pretty much all there is to it um a few little things i guess when we scroll down we saw this you know the white stuff has ended right so we can just go into our css and i think this was because we set a height of vh here so we can take that off and there you go straight to the bottom no vh clicking through and they all work we probably don't need the console log now in where was it in when it comes into our load vids we can delete that you don't really have that in production code there you go i hope that was easy enough for you uh clear enough to follow so we pulled in all the information we needed to using variables we sent the request in functions load and the load called it and we basically said hey youtube url here's your settings your options now return me something called data with all the information in it then we call the main vid which took the id from the very first video and loaded it this is mainvid right underneath went to the html and injected with the new id from this zero off position into it we then call the results loop we then call the results loop uh just taking our space and stuff uh and basically the results loop took in the data from that api call and for each item it created variables of what we needed then appended to the main so didn't change domain the whole html it added to the main each time an article this is the article i'm just gonna go across add an article to it with the dynamic data for each array item so you know each in the items it was an array i had 11. i actually had 12 different items so go through that each time putting these variables in place and then when i click dig down to the article find the data key with inside this article then call that main video again with the new id and that's why it updates okay guys i hope that wasn't too difficult like i said earlier and i hope you got a lot out of it please comment subscribe and like the video thanks for joining me and i'll see you in the next video