JavaScript How to add data-id to button, allowing me to remove the 2nd container

htmlcssjavascript28 · Nov 27, 2022

Can you help me?

The whole goal or overarching objective here is being able to remove the 2nd container from the code.

My HTML is repetitive. Since I only show one player at a time, I should only have a single container.

I’m already using data-container on each button to figure out which video container I want to play.

Instead I want to have a single video player element/container, and just pass the corresponding data-id directly from the button instead. Where I can then instantiate the video player in the same process to load only the video that is clicked.

<div class="video video-frame">

So for example, I’m using play2 to go find a video container named play2 and doing actions to show that specific container. In that container I have an element that has the data-id of my YouTube video -Xgi_way56U

So instead of creating a playX container for every single video, I want to put -Xgi_way56U on the button instead. When the button is clicked, I want to take that ID and pass it into the video player element to load it on demand.

The idea here would be to attach the id data-id="-Xgi_way56U"

to the button:

<button class="playa2 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

Code:

<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons:

Code:

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/82rxzq7h/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

I have been having a very difficult time trying to figure out how to do this in the code.

Code:

<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.

Code:

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

I tried to provide as much detail in here as possible in what I am trying to do in the code.

If you may have any questions, or would like to know more information, please ask.

htmlcssjavascript28 · Dec 13, 2022

I fixed that here: https://jsfiddle.net/8bh6j1x2/

There are no other errors in the code.

CSS:

body.bg2 {
--color-a: #350048;
}

body.bg3 {
--color-a: #0e1538;
}

Is this almost right?

JavaScript:

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

htmlcssjavascript28 · Dec 13, 2022

Is there a certain way for this to be written that will work in the code?

Does this provide better clarity as to what I am trying to do in the code?

I am not sure how to have both of these working.

JavaScript:

document.querySelector(".wrap1");

document.querySelector(".wrap2");

.wrap2 video appears here: https://jsfiddle.net/cj6yudkm/

JavaScript:

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const wrapper = document.querySelector('.wrap2');
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

.wrap1 videos appears here: https://jsfiddle.net/cj6yudkm/1/

JavaScript:

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const wrapper = document.querySelector('.wrap1');
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

When combined: https://jsfiddle.net/cj6yudkm/3/

Only .wrap1 videos appear.

JavaScript:

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

htmlcssjavascript28 · Dec 14, 2022

I have it almost working from here: https://jsfiddle.net/wsxb4f5o/

How would that be fixed so both are viewable?

.wrap2 video is now viewable.

.wrap1 video is now hidden though.

JavaScript:

  function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": newWrapper
      });
    });
  }

It was changed from this: https://jsfiddle.net/tyjhp8uf/

.wrap1 video is now viewable.

.wrap2 video is now hidden though.

JavaScript:

players.push({
"cover": button,
"wrapper": wrapper
});

htmlcssjavascript28 · Dec 14, 2022

Does this information help you to better understand what the issue seems to be and how to fix it in the code?

I still don't understand how to fix it.

I was just told this:

do you understand what’s happening here?

you’re taking all the elements with the class name “cover” and saving them in “buttons”

then selecting the 1st element with the class name “wrap2”

then getting it’s HTML?

then putting it into the 1st element with the class name wrap1

why? why?

anyway. make sure that the “container play2 with-curtain hide isOpen” doesn’t get a “hide” class, but an “active” class

In regards to this:

I have it almost working from here: https://jsfiddle.net/wsxb4f5o/

How would that be fixed so both are viewable?

.wrap2 video is now viewable.

.wrap1 video is now hidden though.

JavaScript:

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": newWrapper
      });
    });
  }

It was changed from this: https://jsfiddle.net/tyjhp8uf/

.wrap1 video is now viewable.

.wrap2 video is now hidden though.

JavaScript:

players.push({
"cover": button,
"wrapper": wrapper
});

htmlcssjavascript28 · Dec 18, 2022

I almost have the code working.

This is the closest I have gotten to getting the code to work.

I am stuck on this.

3rd button is not supposed to be a playlist

Used as an example: Clicking on the 5th Blue play button here takes you to the data-id video: https://jsfiddle.net/v1pt5j4g/

HTML:

<button class="playSingle4 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

JavaScript:

for(let i = 0; i < 96; i++) {
    players.add(".playSingle" + i, (playerVarsList[i] || {}));
  }

In the code with 3 buttons, how would that be fixed? https://jsfiddle.net/kja4w5ug/

This button data-id video is not appearing when the 3rd blue play button is clicked.

Instead, a playlist is appearing there for some unknown reason.

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

JavaScript:

//to add the player to all the play buttons
  let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

  //looping over all the play buttons and adding player to that
  for (let i = 0; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));
  }

How would the javascript in the code with the 3 buttons be adjusted?

Currently: When the 3rd button is clicked for some reason a playlist is appearing and not the data-id video that is attached to the button.

I have no idea how that occurred.

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
I almost have the code working.

This is the closest I have gotten to getting the code to work.

I am stuck on this.

3rd button is not supposed to be a playlist

Used as an example: Clicking on the 5th Blue play button here takes you to the data-id video: https://jsfiddle.net/v1pt5j4g/

HTML:

<button class="playSingle4 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

JavaScript:

for(let i = 0; i < 96; i++) { players.add(".playSingle" + i, (playerVarsList[i] || {})); }

In the code with 3 buttons, how would that be fixed? https://jsfiddle.net/kja4w5ug/

View attachment 1878

This button data-id video is not appearing when the 3rd blue play button is clicked.

Instead, a playlist is appearing there for some unknown reason.

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

View attachment 1879

JavaScript:

//to add the player to all the play buttons let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length; //looping over all the play buttons and adding player to that for (let i = 0; i < totalPlayButtons; i++) { players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {})); }

How would the javascript in the code with the 3 buttons be adjusted?

Currently: When the 3rd button is clicked for some reason a playlist is appearing and not the data-id video that is attached to the button.

I have no idea how that occurred.

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

Hi there,
I don't see the issue with the third button. When I click on it, the video shows up.

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
Hi there,
I don't see the issue with the third button. When I click on it, the video shows up.

Hi.

The issue here is that it's supposed to be a single video, not a playlist.

I am stuck trying to figure out how to fix that in the code.

I am not sure how that would be fixed.

That is how it works in the example code I provided:

If a playlist isn't given to a button, then the data-id="" that is attached to the button is supposed to show the video.

HTML:

data-id="-Xgi_way56U"

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
Hi.

The issue here is that it's supposed to be a single video, not a playlist.

I am stuck trying to figure out how to fix that in the code.

HTML:

data-id="-Xgi_way56U"

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

So the issue here, is that if the video is a part of a playlist, youtube will automatically present the option of viewing the playlist. This is not a bug on your code.

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
So the issue here, is that if the video is a part of a playlist, youtube will automatically present the option of viewing the playlist. This is not a bug on your code.

I never suggested it was a bug.

What I am saying is, a single video should appear, not a playlist.

I don't know how to fix that.

The video from the data-id from here should appear:

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

Which is the way it works in the example code I provided: https://jsfiddle.net/v1pt5j4g/

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
I never suggested it was a bug.

What I am saying is, a single video should appear, not a playlist.

I don't know how to fix that.

The video from the data-id from here should appear:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

If you look at my screenshot, I am only seeing the video you link to. The only way you will see the playlist, is if you click on the playlist button on the top right

Antero360 · Dec 18, 2022

To re-iterate, your code shows the video it was intended to show. The playlist function comes from youtube itself. You do not need to fix anything

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
If you look at my screenshot, I am only seeing the video you link to. The only way you will see the playlist, is if you click on the playlist button on the top right
View attachment 1881

The video from here button 3 should be appearing:

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

These go to button 1 and button 2.

JavaScript:

let playerVarsList = {
    0: {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    1: {
      playerVars: {
        listType: "playlist",
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
      }
    }
  }

The video playlist from your screenshot image is from button 1.

As is how it works in the example code: https://jsfiddle.net/v1pt5j4g/

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
The video from here should be appearing:

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

These go to button 1 and button 2.

JavaScript:

let playerVarsList = { 0: { playerVars: { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }, 1: { playerVars: { listType: "playlist", list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq" } } }

The video playlist from your screenshot image is from button 1.

The button I clicked on, was indeed button #3, from left to right.

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
If you look at my screenshot, I am only seeing the video you link to. The only way you will see the playlist, is if you click on the playlist button on the top right
View attachment 1881

The video from here should be appearing:

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

As is how it works in the example code: https://jsfiddle.net/v1pt5j4g/

Click on button 5, that video appears.

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
The video from here should be appearing:

HTML:

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

View attachment 1882

As is how it works in the example code: https://jsfiddle.net/v1pt5j4g/

Click on button 5, that video appears.

Please see attached screen-capture.

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
Please see attached screen-capture.

The correct video from button 3 is not appearing, that is what I am referring to.

htmlcssjavascript28 · Dec 18, 2022

The code using 3 buttons is written differently: https://jsfiddle.net/kja4w5ug/

I am trying to fix it so that it works the same way as the example code: https://jsfiddle.net/v1pt5j4g/

HTML:

function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": (index < allWrappers.length) ? allWrappers[index] : allWrappers[allWrappers.length - 1]
      });
    });
  }

JavaScript:

//to add the player to all the play buttons
  let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

  //looping over all the play buttons and adding player to that
  for (let i = 0; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));
  }

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
The correct video from button 3 is not appearing, that is what I am referring to.

That's one problem, the original issue here is that you are claiming that you are seeing a playlist instead of a single video. I keep mentioning that I only see one video, and that the only way you can see the playlist is if you click on the button on the top right. I also mention that that functionality comes straight from youtube, not from your code. The screen capture was intended to help you understand that.

htmlcssjavascript28 · Dec 18, 2022

Antero360 said:
That's one problem, the original issue here is that you are claiming that you are seeing a playlist instead of a single video. I keep mentioning that I only see one video, and that the only way you can see the playlist is if you click on the button on the top right. I also mention that that functionality comes straight from youtube, not from your code. The screen capture was intended to help you understand that.

The correct video from button 3 not appearing, that is the problem in the code I am trying to fix.

Antero360 · Dec 18, 2022

htmlcssjavascript28 said:
The correct video from button 3 not appearing, that is the problem in the code I am trying to fix.

You are talking about 2 separate issues here:
a) the button is not opening the right video
b) there is a playlist showing up

Welcome to Code Forum!

JavaScript How to add data-id to button, allowing me to remove the 2nd container

Silver Coder

Silver Coder

Silver Coder

Silver Coder

Silver Coder

Silver Coder

Software Engineer

Silver Coder

Software Engineer

Silver Coder

Software Engineer

Software Engineer

Silver Coder

Software Engineer

Silver Coder

Software Engineer

Attachments

Silver Coder

Silver Coder

Software Engineer

Silver Coder

Software Engineer

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy