He creado una animación corta que me gustaría implementar en mi sitio web.

La animación dura solo un par de segundos y no tiene sonido.

Me gustaría implementarlo, como se implementaría un GIF, lo que significa: quiero que se reproduzca automáticamente, se ejecute en un bucle constante y no quiero que haya ningún control .

Y entonces rendericé un GIF y, para comparar, también rendericé un video .mp4 y el .mp4 es muy superior:

mp4: Se ve exactamente como quiero que se vea.

GIF: incluso después de dividir la velocidad de fotogramas a la mitad, el archivo GIF sigue siendo unas 5 veces más grande que el .mp4 y se ve notablemente peor.

Entonces, por supuesto, estoy implementando el .mp4 y así es como lo hice: <video autoplay muted loop> : esto funciona perfectamente bien en el escritorio, pero no funciona perfectamente bien en el móvil.

En el escritorio básicamente se comporta como un GIF, pero en el móvil no se reproduce automáticamente y cuando hago clic en reproducir, abre el video en una especie de "caja de luz" o reproductor, donde todo lo demás desaparece y solo veo el video.

Quiero que el video, en el móvil, también se reproduzca automáticamente y no quiero que el navegador abra ningún tipo de reproductor, ¿cómo puedo hacer esto? O: ¿Es esto posible?

Realmente no quiero trabajar con un GIF, si es posible. El .mp4 es mucho mejor.

Si esto no es posible con CSS, ¿quizás haya una forma JS?