How to run the same css animation?

Question

css

How to run the same css animation on click? Those. the animation should break and start over. Now it works like this: there are two classes with the same animation and they just change on click depending on the flag. If you just remove the class and immediately add it, then the animation just continues to run without returning to the beginning.
Link to jsfiddle

Answer 1

Answer 2

And this one won't work:

function animateActive() {
     video.classList.toggle('animate');
 }

Seems to work the way you want.