This is the last working code before changes were made to it. https://jsfiddle.net/teogar3y/
You click on a button, and a video loads.
To be able to add a cross fade effect in, first the play buttons need to be in a separate container.
I first started with moving the play buttons out to a separate container, and that is the step I am working on now.
The code needs to first be working with the play buttons inside a separate container before I am able to do anything else to the code.
I don't know why after clicking on the buttons, the code is not working.
How do I get the code to work with the play buttons placed inside a separate container?
After clicking on a button, a video is supposed to appear on the screen.
To test JSitor code click Run, not update. https://jsitor.com/PjUpkV5k6
You can save code edits in the jsfiddle code: https://jsfiddle.net/w5d64kva/
I am getting this error:
Uncaught TypeError: Cannot read properties of null (reading 'classList') at line 234 col 8
Which in the javascript points to this line: el.classList.remove("hide");
Which is inside here:
function show(el) {
el.classList.remove("hide");
}
I am not sure what needs to be fixed or adjusted in the code for it to work.
Update: Doing this fixed the error, but the video is still not showing on the screen.
I changed parent to document.
function playerAdder(playerOptions) {
const wrapper = document.querySelector(".wrap");
return function callback() {
initPlayer(wrapper, playerOptions);
};
}
It can be heard playing in the background now.
To test JSitor code click Run, not update.
Here: https://jsitor.com/rYaUWq3el
To save code edits, you can use this jsfiddle link:
Here: https://jsfiddle.net/r4ouLs5x/
Auto play does not work in jsfiddle though.
To hear the video playing in the background, use the JSitor link.
After a button is clicked, a video can be heard.
It can't be seen on the screen though.
After clicking a button, a connection is made, the video is playing, but there is no video showing on the screen.
Also, after a button is clicked, you can see they fade-out, and pop right back up again.
html
<div class="container play1 with-curtain">
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="red" />
<circle cx="0" cy="0" r="113" />
<path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</g>
</svg>
</button>
</div>
</div>
<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="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play3 with-curtain">
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play4 with-curtain">
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play5 with-curtain">
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play6 with-curtain">
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play7 with-curtain">
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play8 with-curtain">
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play9 with-curtain">
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
Here is the playButtonContainer that holds all the buttons.
In here I am using data-destination=" to reach the above html.
Though, data-destination="" may not even be doing anything in the code.
or, maybe it is not needed, I am not sure.
<div class="playButtonContainer">
<button data-destination=".play1" class="playa thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
</button>
<button data-destination=".play2" class="playb thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play3" class="playc thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play4" class="playd thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play5" class="playe thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play6" class="playf thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play7" class="playg thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play8" class="playh thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<button data-destination=".play9" class="playi thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
</div>
from Video not appearing after button click
No comments:
Post a Comment