Besoin de simplifier un code (video thumbnails)

Bonjour,
J'ai actuellement un site de streaming video, lorsqu'on survole une miniature l'image est premplacée par une vidéo preview de 5 secondes.

Le problème c'est que j'ai réalisé ce code :

<script>
window.addEventListener('DOMContentLoaded', () => {
const play = function() {
Array.from(document.querySelectorAll('.thumbvid'))
.filter(video => video !== this)
.forEach(video => video.pause());
this.play();
};
document.querySelectorAll('.thumbvid')
.forEach(video => {
video.addEventListener('mouseenter', play);
video.addEventListener('touchstart', play);
});
});
</script>

<a href="{$baseurl}/video/{$videos[i].VIDEOID}/{$title}" alt="{$videos[i].title|stripslashes}"><video class="thumbvid" loop="" poster="{$thumburl}/{$videos[i].VIDEOID}-1.jpg" preload="none" muted>
<source src="{$baseurl}/thumbs/{$videos[i].VIDEOID}.mp4" type="video/mp4">
</video></a>

J'ai bien l'effet souhaité, la thumnail vidéo apparait bien lors du touché (mobile) ou du survol de la souris. Mais le problème c'est que google indexe toutes mes vidéos "thumbnails" de 5 secondes.

En fait j'aimerai avoir quelque chose de plus simple avec du display:none et display:block.

Contactez moi pour plus d'infos.