JS Injection Doesn't Work on all Devices, Makes Text Disappear on Mobile

Design help Custom code
1

Hi!

I’m very new to web dev so please be nice if I’ve made a really dumb mistake, which is likely.

I have some background videos in my site which I need to be able to play across all devices, including mobiles, which by default, don’t play the video. To achieve this, I put the following code before the tag:

<script>
for (video of document.getElementsByTagName("Figure")) {
     video.setAttribute("playsinline", "");
     video.setAttribute("muted", "");
     video.play();
}
</script>

Note: I can’t set the background video’s tag to “video” for some reason, so I’ve set them, and only them, to “Figure”.

Note 2: I found this code here: https://discourse.webflow.com/t/embedded-video-not-playing-showing-on-mobile-devices/136359

Now this JS works (mostly) fine, making the background videos play on most devices and browsers I’ve tested it on, but on all mobiles I’ve tested it on, it makes the text that is overlayed on the video disappear completely. I’ve tried changing the Z axis of the text elements to see if it somehow ended up below the video, but this wasnt the case.

How can I fix both the non-playing on certain devices issue, and the disappearing text issue?

Thanks in advance,
Ben

Here is my site Read-Only: LINK
(how to share your site Read-Only link)