I would just set a suitable max width on the container and let them wrap when they want using a flex layout.
1 Like
Doing this would allow me to use one 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.
So for example, Iām using play3 to go find a video container named play3 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 here:
<button class="playa1 cover" type="button" data-container="play1"></button>
Which would then become this:
<button class="playa3 cover" type="button" data-container="play3" data-id="-Xgi_way56U"></button>
At this link here: https://jsfiddle.net/3z4e0p2x/
There are only 3 containers, and 3 buttons.
I reduced it in size so it is easier.
Is this something that I am able to do in the code?
That sounds feasible.
I havenāt looked at your code as only on a mobile tonight.
It sounds like you just need to show the video you want and hide the play buttons. Then do the reverse on exit.
Back tomorrow now. See if you can come up with something on your own.
1 Like
Do you understand how to do this?
<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>
<!-- -->
<div class="playButtonContainer with-curtain">
<button class="playa3 cover" type="button" data-container="play3" data-id="-Xgi_way56U"></button>
<!-- -->
</div>
<script>
document.querySelectorAll('button[data-id]')
.forEach((button) => {
button.addEventListener('click', (e) => {
document.querySelector('.video').dataset.id = e.target.dataset.id;
// do stuff
// e.g., set src of <video> element or other media player
})
})
</script>
What I am first trying to figure out how to do is get it down to 1 container.
The above code, I donāt know if it will work with that, or if it would be written a different way.
If there are things in the code here I didnāt need to do, or changes I didnāt need to make, you can tell me.
This question deals with, creating 1 added/unique container that is different from the others.
Basically what I am trying to do here is, make the sliding curtains a different color from the rest.
Whether or not a new container is needed to do this, I donāt know.
But I am thinking so.
Currently, clicking on the button takes you to .play2, where it opens, just no video is appearing.
Broken Code, I am trying to get working. Has the 1 added container in it.
https://jsfiddle.net/njbz2hpu/
<div class="container play2 with-curtain">
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="panel2"></div>
</div>
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
I might not even need that extra added container to do this, I donāt know.
<button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
<span class="color-circle"></span>
</button>
It went from this: Working code. https://jsfiddle.net/7apg90wz/
2 buttons / 2 containers
function findPlayers() {
const allCovers = document.querySelectorAll(".cover");
const allWrappers = document.querySelectorAll(".wrap");
allCovers.forEach(function addToPlayers(cover, index) {
players.push({
"cover": cover,
"wrapper": allWrappers[index]
});
});
}
to this: Working code. https://jsfiddle.net/5qvrjkng/
96 buttons/ 1 container
The above findPlayers function was changed to this:
function findPlayers() {
const buttons = document.querySelectorAll(".cover");
const wrapper = document.querySelector(".wrap");
buttons.forEach(function addToPlayers(button) {
players.push({
"cover": button,
"wrapper": wrapper
});
});
}
And this was added:
Something I learned.
event.currentTarget has to be used here instead of event.Target because there is a <span> inside the spinner button.
const myVideo = document.querySelector('.video');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
myVideo.dataset.id = event.currentTarget.dataset.id;
});
});
How would I be able to have a video show/appear in the added container?
Where it would then become: 96 buttons / 2 containers
If a 2nd container is needed at all.
I was trying to do this:
It ended up taking both buttons to .play2 regardless if it had .play1 attached to it.
<div class="container play1 play2 with-curtain">
This is what is responsible for the color of the sliding curtain:
background-color: #222;
If I want one of them to be a different color from the rest, how would that be done?
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background:
repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
}
I was able to do this via javascript: https://jsfiddle.net/hpm9Lja1/
I donāt think this can be done via CSS.
I did if/else so that it is only given to one class and not all the other buttons.
const myVideo = document.querySelector('.video');
const background = document.querySelector('body');
const panel = document.querySelector('.panel');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
const button = event.currentTarget;
myVideo.dataset.id = button.dataset.id;
if (button.classList.contains('playInitial')) {
//background.className = 'body initial';
//panel.className = 'panel initial';
background.classList.add('initial');
panel.classList.add('initial');
} else {
//background.className = 'body';
//panel.className = 'panel '
background.classList.remove('initial');
panel.classList.remove('initial');
}
});
});
You could have done it all from the initial class on the body.
No need to add a class to the panel as well as you can find that panel from the body.
e.g.
/*
.panel.initial {
background-color: lime;
}
*/
.initial .play1 .panel {
background-color: lime;
}
1 Like
I have this now: https://jsfiddle.net/e04j1z97/1/
.initial .play1 .panel {
background-color: #B76BF0;
}
body.initial {
--color-a: #379DEB;
}
const myVideo = document.querySelector('.video');
const background = document.querySelector('body');
const panel = document.querySelector('.panel');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
const button = event.currentTarget;
myVideo.dataset.id = button.dataset.id;
if (button.classList.contains('playInitial')) {
//background.className = 'body initial';
//panel.className = 'panel initial';
background.classList.add('initial');
panel.classList.add('initial');
} else {
//background.className = 'body';
//panel.className = 'panel '
background.classList.remove('initial');
panel.classList.remove('initial');
}
});
});
Improving it I was able to do this: https://jsfiddle.net/dfjr6302/
(function manageInitial() {
const myVideo = document.querySelector('.video');
function addInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function addInitial(initial) {
initial.classList.add("initial");
}
allInitial.forEach(addInitial);
}
function removeInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function removeInitial(initial) {
initial.classList.remove("initial");
}
allInitial.forEach(removeInitial);
}
function applyInitial() {
addInitial(".playInitial, body, .panel");
}
function withdrawInitial() {
removeInitial(".playInitial, body, .panel");
}
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
const button = event.currentTarget;
myVideo.dataset.id = button.dataset.id;
if (button.classList.contains('playInitial')) {
//background.className = 'body initial';
//panel.className = 'panel initial';
/*background.classList.add('initial');
panel.classList.add('initial');*/
applyInitial();
} else {
//background.className = 'body';
//panel.className = 'panel '
// background.classList.remove('initial');
// panel.classList.remove('initial');
withdrawInitial();
}
});
});
}());
I have a question: https://jsfiddle.net/dfjr6302/
Would I be able to add this:
function addInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function addInitial(initial) {
initial.classList.add("initial");
}
allInitial.forEach(addInitial);
}
function applyInitial() {
addInitial(".playInitial, body, .panel");
}
Inside here:
const manageCover = (function makeManageCover() {
Would I be able to add this:
function removeInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function removeInitial(initial) {
initial.classList.remove("initial");
}
allInitial.forEach(removeInitial);
}
function withdrawInitial() {
removeInitial(".playInitial, body, .panel");
}
Inside here:
const manageUI = (function makeManageUI() {
I got stuck, I think it can be done though, unless I am wrong and it canāt.
My 2nd attempt:
I was able to add initial.
How would I then remove it?
https://jsfiddle.net/ef9ynjqL/
This worked:
function addInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function addInitial(initial) {
initial.classList.add("initial");
}
allInitial.forEach(addInitial);
}
function resetPage() {
addInitial(".playInitial, body, .panel");
}
This did not work:
function removeInitial(initialSelector) {
const allInitial = document.querySelectorAll(initialSelector);
function removeInitial(initial) {
initial.classList.remove("initial");
}
allInitial.forEach(removeInitial);
}
function fadeReset() {
removeInitial(".playInitial, body, .panel");
}
I would add the initial classes to the html by default (as you have done to the PlayIninital button) because you want it to happen ony the first time you press the play button. (You seem to be adding them each time a button is pressed. )
Then when you exit just remove those classes and they will be gone. No need for multiple checks just remove them in your exit routine.
1 Like
This is all news to me, so Iāve been doing this the wrong way.
This here is my last updated code: https://jsfiddle.net/b0pcmwj5/
My 1st attempt: https://jsfiddle.net/c5673sno/
Only the panel is a different color, not the body.
How do I have the body be a different color?
.panel.initial {
background-color: #B76BF0;
}
body.initial {
--color-a: #379DEB;
}
<div class="container play1 with-curtain">
<div class="inner-container curtain">
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
<div class="panel initial"></div>
</div>
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
Looks like #379DEB to me on first play.
body.initial {
--color-a: #379DEB;
}
That seems to be working.
When I click on the play image, the body is not that color.
https://jsfiddle.net/c5673sno/
body.initial {
--color-a: #379DEB;
}
There is no class of initial on the body in that one.
There is one here though.
Add a class to the body by default.
e.g.
<body class="initial">
<div class="container play1 with-curtain">
1 Like