So I made a toggle button with JS functionality inside elementor plugin. When button clicked for the first time, the embedded video will play. When clicked after that, it'll pause. And when clicked again, it'll play again. And so on. Here's the code I've written:
const vid1 = document.getElementsByClassName("eicon-play")[0];
let santanVid = 'pausing';
document.getElementById("santan-thumb").onclick = () => {
if (santanVid = 'pausing') {
santanVid = 'playing'
} else if (santanVid = 'playing') {
santanVid = 'pausing'
}
if (santanVid = 'pausing') {
vid1.click();
$('.elementor-video')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
} else if (santanVid = 'playing') {
vid1.click()
$('.elementor-video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
}
};
The problem is, it only worked once. The first time I load the page, click the button and the video will play. Click the button the second time, and the video stop. But if I clicked again, the video won't play
I've tried using 2 button and the code is working, the problem occurs when I'm using 1 button as a toggle, and I'm curious how to make it possible that way.
Thank you before!
In your if statements you are assigning values, not checking. To check use double or triple equal signs (==) or (===)
Example: if(santanVid === 'pausing')