Here and if i click on any of these videos it should be displayed over here and this is a youtube video player so we can just click on play and this video will play and we can access all the.
Controls of the youtube video player over here now in the previous video i showed you how to create the design so this is how it looks right now we haven't added the functionality yet so.
If i click on the second video nothing happens over here so that's what we're gonna do in this video we're gonna add the functionality using javascript so that when we click on these videos those.
Videos will be displayed over here so let's get started now when we click on one of these thumbnails the video should be displayed.
Over here so for that we need to get the url of the video and let's go to our source code and here we can see in the html this is the division with the class of featured.
Videos of the current channel so for that you can just type question mark rel equals 0 and if i do that and if i go back to our youtube player and if i click on play.
And if i click on pause once again we can see that all the related videos are from the live blogger channel so you can add rel equals 0 if you want to have just your videos displayed over.
Here in the related section right now if you take a look at this url we can see that we have an id over here of the video so this is the video id.
Now let's go back to youtube and let's open the video so this is the video let's open the video over here so.
This is the video let's open it right now here we can see we have this id stqx and this id right here so we have the same id over here in this embed url now we can make use of this.
Format and we can add different videos Wesdigital
Over here so if i add an id of a different video over here that video will be embedded over here in our video player so now what we will do.Is we will add a data attribute to all the thumbnails so data attributes are basically used to store some data inside the tags so here we have this img tag with a.
Class of thumbnail so these are all the thumbnails over here now we need to store the data of the video id over here inside these tags and we also need to store the title of the videos so here.
For the first thumbnail this is the first thumbnail so for that we need to have this video id so let's copy this.
And let's go back to our vs code and let's add a data attribute so we can just type data hyphen and just add the name we'll just name it id and let's set it equal to this video id and we also.
Need to add the title so let's type data hyphen title equals and this is the title of the video so let's copy this title.
And let's paste it over here so that's it with the data attributes of the first image now let's go to the second thumbnail and here we will add the id and the title so let's go back to.
Our channel and let's get the second video so this is the second video portfolio website so this is the video let's open this and here we can see this is the video id.
So let's copy this and let's go back and here for the second image let's type data hyphen id equals.
And let's paste it over here
And let's also add the title so let's tap data iphone title equals and let's go back to our video and let's copy this title from here.Let's copy it from here and let's paste it over here now we have the last thumbnail which is right here so let's type data hyphen id.
And let's go back to our video gallery and the third video is this one right here so let's get the video id and this is the video let's open this and let's copy this video id.
And let's go back to vs code and let's paste it over here and let's also add the title so let's tap data hyphen title equals and let's copy this title from here.
And i'll just paste it over here right now the next thing we will do is we will add the javascript to display the correct videos over here so for that we will use the data attributes of id.
And title now to do that we need to get some elements from the html so we need to reference some of these elements we need to reference the iframe because we need to change the source and then we.
Need to reference all these thumbnails so we have the image with the class of thumbnail so we need to reference all these three thumbnails over here and if you scroll down we can see that we have.
Already linked our main.js file so we have this iframe over here inside the featured video class which is inside video gallery and for all the thumbnails we have a class of thumbnail so let's go.
To main.js file and let's type const video thumbnails equals document.queryselect all because there are multiple thumbnails.
And let's type video gallery all videos thumbnail now all the thumbnails will be stored inside this video thumbnails constant.
Right now let's reference the iframe so let's type const and we'll just name it video player equals document.queryselector and it is inside video gallery.
Featured video and we have an iframe now the next thing we will do is we will add event listeners to all these video thumbnails so there are multiple video.
Thumbnails over here so let's use a for each loop i'll just tap video thumbnails dot 4 each and for each of the video thumbnail i'll just call it v and let's create an error.
Function over here and in here i'll just tab v which is the single video thumbnail and let's add an image listener so let's tap add event listener and we will listen for the click event.
And let's create an arrow function over here now here we will call a function to show the video so i'll just create a function called show video.
And i'm just calling it over here we'll just create it in a moment now in this show video function we need to pass two arguments the first one is the id and the second one is the title so we have.
Both these data attributes over here now to access these data attributes you can just type v which is the video thumbnail dot data set.
Dot the name of the data attribute so the first one is id let's type v dot data set dot title so here we can see we have the id and.
Title so we need to use the same names over here right now let's create the show video function so let's tap const show video and here.
For the video id we'll just receive it as video id and for the title we'll just receive it as title right now let's create a variable to.
Store the video url so let's type video url equals now we're going to append this video id url into this video url string so for that we will use backticks and.
Let's go back to our html file and this is an example of the source so let's copy this and let's paste it over here now instead of this id right here we.
Need to add the id that we get from this function call so i just delete this id and let's type dollar symbol and.
Curly braces and here we just add video id right now that we have the video url let's add the video url to the source of the video player which is the iframe so.
Let's type video player dot set attribute and we need to set the attribute of src so let's type src over here and for the.
Second parameter let's type video url now the last thing we need to do is we need to update the video title so let's also reference the video title let's go to the index.html file and for.
The video title we have an s3 with the class of video title so let's tap const video title equals document.queryselector video gallery.
Video title and here we'll just type video title dot inner html equals title right now let's see whether it works so.
Let's go back to our website and let's click on the second video and we have the second video displayed over here and let's click on play.