Using vimeo instead of gifs on image rollovers (7.1)?

Site URL: https://www.animatedcompany.com/

If anyone knows how to do this, I'd be super grateful for your help as I've looked this up on multiple forums and haven't found anything. I'm not much of a coder so I'm at a loss on how to solve this issue on my own.

I have a gallery with images that currently animate when the mouse rolls over them. Right now when the mouse rolls over the image the image is replaced with an animated gif, which I've uploaded to an unlinked page on the site and referenced in the code. However, I've realized that the gifs are too large in size and therefore they don't play instantly when the user first loads the page and hovers over the image, which isn't ideal. I could potentially downgrade the gifs even further in quality so as to make the files smaller and load faster, but I was reading about the possibility of using mp4s instead of gifs which will supposedly cut down on file sizes while maintaining quality. So what I want to do is have my code reference an mp4 instead of a gif.

The issue is that to my knowledge squarespace doesn't allow video hosting, which means I have to reference the mp4s as an embedded video - and that's where things have become complicated and I'd love for someone to help tell me what I'm doing wrong. I'm using vimeo as my video host, but I'm not sure how to get the code to recognize the vimeo video. The original code was created by Bernard West here on the squarespace forums, many thanks to him for providing this code:

<script>
   (function() {
 var imgs = document.getElementsByTagName('img');
 var vid = document.getElementsByTagName('vimeo-player');

 for (var i = 0, n = imgs.length; i < n; i++)
 {
   if (imgs.getAttribute("data-image") == "https://images.squarespace-cdn.com/content/v1/5eaae124f74e885ed43ef119/1588348053720-MHHY5K1N9GUZDMRAVCV3/ke17ZwdGBToddI8pDm48kPH0MW_dKDKQQniayBjje0l7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1Uag6dNbkhZ3NTHwlF9AMtOyYWHubiA6WOrblBwnw5MIcZDqXZYzu2fuaodM4POSZ4w/Pepsi+Thumb+v02.png")
   {
     imgs.setAttribute("id", "targetIMG");
     imgs.addEventListener("mouseover", newImage);
     imgs.addEventListener("mouseout", oldImage);
     break;
   }
 }

})();

function newImage() {
 var img = document.getElementByID("iframe");  
 img.getAttributeNode("src").value = "https://player.vimeo.com/video/414211714?autoplay=1&loop=1&title=0&byline=0&background=1&portrait=0\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen";
}

function oldImage() {
 var img = document.getElementById("targetIMG");  
 img.getAttributeNode("src").value = "https://images.squarespace-cdn.com/content/v1/5eaae124f74e885ed43ef119/1588348053720-MHHY5K1N9GUZDMRAVCV3/ke17ZwdGBToddI8pDm48kPH0MW_dKDKQQniayBjje0l7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1Uag6dNbkhZ3NTHwlF9AMtOyYWHubiA6WOrblBwnw5MIcZDqXZYzu2fuaodM4POSZ4w/Pepsi+Thumb+v02.png";
}
</script>

Currently nothing happens when you hover over the Pepsi image on the site.