Changing embeded Twitch id

I’m trying to embed Twitch videos on a web page with a large main video and a sidebar of smaller ones. What I want to do is when you click on a smaller video it changes the id of the main video.

HTML

<div id="twitch-embed"></div>
      
         <aside class="vids" >
            <div class="vid" id="twitch-embed-sm-1"></div>
 
            <div class="vid" id="twitch-embed-sm-2"></div>

            <div class="vid" id="twitch-embed-sm-3"></div>

            <div class="vid" id="twitch-embed-sm-4"></div>
          </aside>

JS

const current = document.querySelector("#twitch-embed");
const vids = document.querySelector(".vids");
const vid = document.querySelectorAll("vids div.vid");
const video = document.querySelectorAll("vids div#vid");

video.addEventListener("click", videoClick);

function videoClick(e) {
  current.id = e.target.id;
}

I’m also not sure if I have to change the channel name as well. Bolded below.

Pulled from Twitch API

<script type="text/javascript">
      var embed = new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        **channel: "monstercat",**
        layout: "video",
        autoplay: false
      });
</script>

So there are three different things being selected by these. The first is going to select the first element with the class vids (in this case, the aside element). The second is going to select all the elements inside that aside that are divs with the class of vid. And the third is going to select all elements inside that aside with the id of vid.

Of those three, the one you want would be the second. And that will return an ‘Array-like structure’ called a NodeList, collecting all the divs.

Next, to attach that listener. It seems like you should be able to simply attach it to the variable, but what that would do is try to attach the listener to the NodeList itself, not to the individual members of that list. Instead, we need to iterate over the collection, and attach the listener to each in turn.

Let’s see how we could do that:

// First, we want to get the elements we'll be using:
// the playing twitch container...
const current = document.querySelector("#twitch-embed");
// this will return a single element, the first with the matching class, which contains more streams
const vids = document.querySelector(".vids"); 
// here, we can use the last element, as it contains all the individual streams:
const videoCollection = [...vids.querySelectorAll("div.vid")];
/****
 * Note the [... and ] around the querySelector, above. Some browsers won't treat a NodeList
 *   as a true array, but we can use the spread operator to turn it into one. Why do we want an array
 *   rather than a NodeList? With an actual array, we can use actual array methods!
 ****/

// our click handler function. I can use a fat-arrow for this one, as it's tiny and doesn't need 'context'.
const videoClick = (e) => current.id = e.target.id;

videoCollection.forEach(function( video ){
  video.addEventListener("click", videoClick) );
}

Now, if you want to change the channel name as well, where would you be getting that from?