I've created a short animation, that I would like to implement into my website.

The animation is only a couple of seconds long and it has no sound.

I would like to implement it, like one would implement a GIF, meaning: I want it to autoplay, run in a constant loop and I don't want there to be any controls.

And so I rendered a GIF and for comparison I also rendered a .mp4-video and the .mp4 is far superior:

mp4: Looks exactly like I want it to look.

GIF: Even after splitting the frame-rate in half, the GIF-file is still about 5x larger then the .mp4 and it looks very noticeably worse.

So, of course, I'm implementing the .mp4 and this is how I did it: <video autoplay muted loop> – This works perfectly fine on desktop, but it does not work perfectly fine on mobile.

On Desktop it basically behaves like a GIF, but on mobile it does not autoplay and when I click on play it opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.

I want the video, on mobile, to also autoplay and I don't want the browser to open any sort of player, how can I do this? Or: Is this possible?

I really don't wanna work with a GIF, if possible. The .mp4 is just much better.

If this is not possible with CSS, maybe there is a JS-way?