<html>
<head>
<style>
.hidden {
display:none;
}
.play-button {
width: 40px;
height:40px;
}
</style>
</head>
<body>
<div class="my-video">
<video>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<img class="play-button" src="/catalog/play-button.png" alt="Play">
</div>
<div class="my-video">
<video>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<img class="play-button" src="/catalog/play-button.png" alt="Play">
</div>
<script>
document.querySelectorAll('.my-video')
.forEach(div => {
const video = div.querySelector('video');
const bplay = div.querySelector('img');
video.addEventListener('click', ev => {
if (video.paused) return;
video.pause();
bplay.classList.remove('hidden');
})
video.addEventListener('ended', ev => {
video.currentTime = 0;
bplay.classList.remove('hidden');
})
bplay.addEventListener('click', ev => {
if (! video.paused) return;
video.play().then (() => {bplay.classList.add('hidden');})
})
})
</script>
</body>
<html>