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?

CodePudding user response：

I've tried it on a mobile device and it auto plays fine for me. Perhaps the playsinline attribute could help you out. You should use the playsinline attribute for mobile devices if you don't want the video to start in fullscreen while playing.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline