document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function (event) {
document.querySelector('.video').dataset.id = event.target.dataset.id;
});
});
Like this?
const myVideo = document.querySelector('.video');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
myVideo.dataset.id = event.target.dataset.id;
});
});
It might seem like a small detail but it all adds up. Your code is now more readable and less confusing. I can scan it much faster and not get hung up on it for even a split second.
1 Like
Why so many buttons, I was seeing what was possible.
I have some ideas.
It looks much cleaner now: https://jsfiddle.net/m5bz9nLu/
Now only 1 container instead of 100.
I lowered it down to 96
This part looks much better.
No longer 100 lines inside here:
function onYouTubeIframeAPIReady() {
//For single videos.
for (let i = 1; i <= 96; i++) {
players.add(".playSingle" + i);
}
//Custom added playervars
Playlists, repeats, set different properties.
/*players.add(".customPlayer", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});*/
}
I figured out what was wrong.
Changing this:
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: fixed the issue.
Now clicking on the 2nd button works. https://jsfiddle.net/2tsc7Lqf/
function findPlayers() {
const buttons = document.querySelectorAll(".cover");
const wrapper = document.querySelector(".wrap");
buttons.forEach(function addToPlayers(button) {
players.push({
"cover": button,
"wrapper": wrapper
});
});
}
Would someone on here be able to please explain to me how this .playInitial button is able to function/work outside the .playButtonContainer?
https://jsfiddle.net/5uy1qzc9/
Shouldn’t the button not work at all?
<button class="playInitial cover " type="button" data-container="play1" data-id="AxLxnN6z0Og"></button>
<button class="exitInitial" type="button" aria-label="Open"></button>
</div>
<div class="playButtonContainer with-curtain hide">
function showCover(playButton) {
hideAll(config.containers);
resetPage();
markAsPlayed(playButton);
const playButtonContainer = playButton.parentElement;
const container = document.getElementsByClassName(playButton.dataset.container)[0];
playButtonContainer.classList.add("active");
container.classList.add("active");
show(playButtonContainer);
show(container);
}
All I needed to list was 1, not all of them.
https://jsfiddle.net/bpncm9dk/
.containerInitial.exitIsOpen {
display: none;
}
.containerInitial.active {
display: none;
}
function resetPage() {
hideInitial(".containerInitial");
}
What should these CSS classes be changed to so that clicking on the .playInitial.cover button will show a video?
The teal button: https://jsfiddle.net/25r6hqtp/1/
Clicking on it, no video shows.
For the video to appear, the CSS classes would need to be written as what?
I’m stuck.
The CSS classes in the CSS would be rearranged in a certain way.
html
<button class="playInitial cover spinner" type="button" data-container="play1" data-id="EK3h0IADYrQ">
<span class="color-circle"></span>
</button>
CSS
.spinner {
-webkit-appearance: none;
appearance: none;
border: none;
padding: 0;
display: block;
cursor: pointer;
/*background: rgba(255, 255, 255, 0.1);*/
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
box-sizing: border-box;
background-clip: padding-box;
/* -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);*/
width: 90px;
height: 90px;
border-radius: 50%;
transform-origin: 50% 55%;
transform: perspective(90px) rotateX(30deg);
animation: spinner-wiggle 5.2s infinite;
}
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid #25d8fb;
transform: translateX(4px);
z-index: 0;
}
@keyframes spinner-wiggle {
30% {
transform: perspective(90px) rotateX(10deg);
}
40% {
transform: perspective(90px) rotateX(7deg);
}
50% {
transform: perspective(90px) rotateX(10deg);
}
60% {
transform: perspective(90px) rotateX(8deg);
}
}
.color-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
transform-origin: 50% 50%;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(50%, #25d8fb),
color-stop(100%, #4f66bb)
);
border-radius: 50%;
z-index: 0;
box-shadow: inset 0 24px 18px -10px rgba(0, 0, 140, 0.3),
inset 0 0 22px -2px rgba(0, 0, 0, 0.4);
cursor: pointer;
-webkit-mask-image: radial-gradient(circle, transparent 0 36px, black 36px);
mask-image: radial-gradient(circle, transparent 0 50px, black 20px);
}
.spinner:hover .color-circle {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(50%, rgba(34, 204, 0, 0.9)),
color-stop(100%, #55ff00)
);
}
.color-circle:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 72px;
height: 72px;
border-radius: 50%;
background-color: #353198;
z-index: 0;
}
.spinner:hover .color-circle {
animation: spin 1.7s infinite linear;
}
@-webkit-keyframes spin {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
Red button is working here: https://jsfiddle.net/bpncm9dk/
<button class="playInitial cover" type="button" data-container="play1" data-id="EK3h0IADYrQ">
</button>
After I changed the style of the button, now no video is showing. https://jsfiddle.net/2sL6p0ex/
I’m thinking the CSS needs to be rearranged a different way.
<button class="playInitial cover spinner" type="button" data-container="play1" data-id="EK3h0IADYrQ">
<span class="color-circle"></span>
</button>
.spinner {}
.spinner::before {}
.color-circle {}
.color-circle:before {}
.spinner:hover .color-circle {}
Did I get this right?
or, would you have said something different?
I shouldn’t be using: event.target
I should be using: event.currentTarget ?
https://jsfiddle.net/cku9xhob/
const myVideo = document.querySelector('.video');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
myVideo.dataset.id = event.currentTarget.dataset.id;
});
});
What are you saying to me?
-
targetis the element that triggered the event (e.g., the user clicked on) -
currentTargetis the element that the event listener is attached to.
Was I correct, or right in making that change?
from event.target to event.currentTarget?
Were you telling me I was right or wrong?
How were you able to use console.log(); to get information?
I have a question.
Removing absolute from here:
.color-circle {
/* position: absolute;*/
Using event.target
myVideo.dataset.id = event.target.dataset.id;
The video now appears. https://jsfiddle.net/9tLd3k6u/
What does that tell you?
It seems like position: absolute; on color-circle CSS class is removing the video element from the document flow.
Is that possible?
Happens when using, any of these:
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
The reason why I would be using event.currentTarget
Also because there is a <span> inside the button.
<button class="playInitial cover spinner" type="button" data-container="play1" data-id="EK3h0IADYrQ">
<span class="color-circle"></span>
</button>
For the purpose of creating 1 unique container that is different from the others
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/aouymthe/
<button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
<span class="color-circle"></span>
</button>
<button class="exitInitial" type="button" aria-label="Open"></button>
</div>
How would I be able to have a video appear in here? https://jsfiddle.net/aouymthe/
This is the added container that was added.
<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>
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/cr0v3ptu/
96 buttons/ 1 container.
For the code to be able to work using 1 container, the above findPlayers function was updated 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
});
});
}
To be able to do this, what would get changed?
Would something in that part of the code get changed?
How would I be able to have a video show/appear in the added container?
Where it would then become: 96 buttons / 2 containers.
What would get changed in the code to allow for a 2nd container to be added?
How the code works is, clicking on a button takes you to a video.
Broken Code: is set up using 2 containers. https://jsfiddle.net/aouymthe/
Does anyone on here know if there is a CSS way to do this?
I was able to do it via javascript. https://jsfiddle.net/sh5fj2ke/
Clicking on the floating play image gives me lime.
Is there a way to do this via CSS?
.panel.initial {
background-color: lime;
}
const myVideo = document.querySelector('.video');
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;
button.classList.contains('playInitial'); {
panel.className = 'panel initial';
}
});
});
contains returns true or false and should be used with a condition (like an if statement or a ternary).
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function(event) {
const button = event.currentTarget;
myVideo.dataset.id = button.dataset.id;
button.classList.contains('playInitial'); {
panel.className = 'panel initial';
}
});
});
This code:
button.classList.contains('playInitial'); {
panel.className = 'panel initial';
}
Is the same as this:
button.classList.contains('playInitial');
{
panel.className = 'panel initial';
}
You want to use button.classList.contains('playInitial') as the condition to an if statement
if(someElement.classList.contains('someClass')) {
// do something
}
As for your question. You can likely use the :has() selector, but it doesn’t have great support yet and probably isn’t the right choice here. I think it would be harder to reason about as pure CSS.
body:has(.playInitial) .panel {
background-color: lime;
}
1 Like
How to assign buttons using for loop.
Can you help me?
I am still trying to understand how to assign listType to a button.
There are 8 buttons.
Each of these would be assigned to a specific button.
I am stuck on how to do this.
https://jsfiddle.net/82gv4nhm/
Doing this only assigns playlist: “0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g” to a specific button.
This means i - 0 playlist is being assigned as the first button.
How would I then assign listType to a specific button?
let playerVarsList = [{
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
},
{
listType: "playlist",
list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
},
{}
];
for (let i = 0; i <= 7; i++) {
players.add(".playSingle" + i, {
playerVars: playerVarsList[i - 0]
});
}
This i - 0 inside here: playerVars: playerVarsList[i - 0] tells the playlist what number button it is:
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g
players.add(".playSingle" + i, {
playerVars: playerVarsList[i - 1]
});
For this one, what tells it what button number it should be?
listType: "playlist",
list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
}
How the code works is, after clicking on a button a video appears.
<button class="playSingle0 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle4 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle5 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle6 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
<button class="playSingle7 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
I am having trouble understanding how to do it.
To do this more than one of these would be needed: i - 0
playerVars: playerVarsList[i - 0],
playerVars: playerVarsList[i - 3]
or
playerVars: playerVarsList[i - 0, i - 3] ?
I have a question.
If there are 96 buttons.
Would there be a way to remove the empty {}, ?
For all the ones that are not being used inside the javascript?
https://jsfiddle.net/rt9zf73a/
function onYouTubeIframeAPIReady() {
let playerVarsList = [{
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}, // 1
{
listType: "playlist",
list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"
}, // 2
{}, // 3
{}, // 4
{}, // 5
{
videoId: '0dgNc5S8cLI',
}, // This is the sixth button
{
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}, // 7
{
start: 150,
end: 1800,
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
},
{}, // 8
{}, // 9
{}, // 10
{}, // 11
{}, // 12
{}, // 13
{}, // 14
{}, // 15
{}, // 16
{}, // 17
{}, // 18
{}, // 19
{}, // 20
{}, // 21
{}, // 22
{}, // 23
{}, // 24
{}, // 25
{}, // 26
{}, // 27
{}, // 28
{}, // 29
{}, // 30
{}, // 31
{}, // 32
{}, // 33
{}, // 34
{}, // 35
{}, // 36
{}, // 37
{}, // 38
{}, // 39
{}, // 40
{}, // 41
{}, // 42
{}, // 43
{}, // 44
{}, // 45
{}, // 46
{}, // 47
{}, // 48
{}, // 49
{}, // 50
{}, // 51
{}, // 52
{}, // 53
{}, // 54
{}, // 55
{}, // 56
{}, // 57
{}, // 58
{}, // 59
{}, // 60
{}, // 61
{}, // 62
{}, // 63
{}, // 64
{}, // 65
{}, // 66
{}, // 67
{}, // 68
{}, // 69
{}, // 70
{}, // 71
{}, // 72
{}, // 73
{}, // 74
{}, // 75
{}, // 76
{}, // 77
{}, // 78
{}, // 79
{}, // 80
{}, // 81
{}, // 82
{}, // 83
{}, // 84
{}, // 85
{}, // 86
{}, // 87
{}, // 88
{}, // 89
{}, // 90
{}, // 91
{}, // 92
{}, // 93
{}, // 94
{}, // 95
{} // 96
]
for (let i = 0; i <= 96; i++) {
players.add(".playSingle" + i, playerVarsList[i]);
}
players.add(".playInitial", {});
}