I have a page with multiple pop up video. I use the same video element for each of them and only change the src attribute after the click event.

BUT, I have a problem (only in Chrome) sometimes the popup shows up and the video doesn't play, and when I copy/paste the URL link from the video element in an other tab, the link loads endlessly and all the pages do the same. I need to restart Chrome to make it work.

There's no JS error when it happens. The sizes of the videos is under 5mb.

Here's my click handler:

$(".playerContainer video").attr("src", videoUrl); 
$(".playerContainer video")[0].play(); 

My html of the video :

<video poster="" id="video-popup" preload playsinline>
   <source src="" type="video/mp4">   
</video>

My Chrome version :

Version 98.0.4758.80

Thank you for your time :)