When something doesn’t work as it is supposed to, I swear to God, it’s an Apple device all the time.

Most recently, I had a problem with autoplay of video elements in the browser for mobile. Instead of using gifs, we decided to use muted, looped videos and it worked fine.

At some point, we replaced them from mp4 to webm. Nothing crazy.

Just to find out a few days later that we’re having issues on iPhone devices that display a blank space instead of the video.

I went over the settings again, making sure it’s muted, it has autoplay, it has the poster in place, all that stuff.

Just to find out that iPhone will not autoplay webm files, and we need to revert back to the mp4 version.

This example below works, it will autoplay the muted video in a loop on your iPhone, as long as it’s not a webm.

Copy Code 


<video poster="video-poster.png" autoplay playsinline loop muted>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>