Why is the video on the site not working correctly?

Question

Video

Hello.
Help solve this problem.

There is a site https://maxtreat.ru/ with a block under the KOMMERSANT banner, there is a photo with a button - by clicking on the button, a video is loaded in a pop-up window.
The problem is this.
The video opens. It is written through the video tag

Here is the pop-up window code.

<div class="video-window">
    <div class="video-window__shell">
      <button class="video-window__shell__close"></button>
      <video src="main/video/videoplayback.mp4" controls></video>
    </div>
  </div>

The video contains controls - a control panel. When you click on the button on the control panel, the video starts to work. If you do not stop the video by clicking on the same button, but simply click on the cross (CLOSE MODAL WINDOW WITH VIDEO), then the video continues to work.
How to make the video completely stop working when you click on the cross. Even if you forgot to press STOP VIDEO on the control panel.

If the controls are removed - the video does not work at all. Just a picture and that's it.

Thanks in advance to all who respond

Answer 1

Firstly, I would do it all by inserting through JS (the video itself), it just doesn't make sense to load it (pull from the server) until the user clicks to open this popup, this will allow you to win in speed.
Secondly, when the user closes the popup, you can clear the path or completely delete the video again. When you reopen it, it will be taken from the cache and everything will be fine (if everything is configured correctly)