htmlcssjavascript28
Silver Coder
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
Instead I want to have a single video player element/container, and just pass the corresponding
So for example, I’m using
So instead of creating a playX container for every single video, I want to put
The idea here would be to attach the id
to the button:
Which would then become this:
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
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.
Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/
Here is the container with buttons:
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.
Here is the container with buttons: Where I attached the
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.
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_way56USo 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.
