Using webm/mp4 files is considered best practice nowadays due to how lightweight they are compared to traditional gifs. My subscription page in AoS Reminders has a couple of demo gifs to show people what they’re buying, and I decided I wanted to speed the page up by only using mp4 files.
So I dutifully converted my gifs to mp4s and set up an auto-playing video in place of the img elements. All was well, and I shipped the code without a second thought.
And then, a few hours later, I decided to check if the deployment had worked. I opened up my phone and… the videos were blank.
Turns out iOS doesn’t quite support webm/mp4 files yet, and you need to provide a fallback image in that case. So I wrote a quick component to help me do that - it displays an auto-playing video by default on compatible devices, and falls back to a gif (or any other image you desire) using the poster attribute of video elements. The CSS is straight from Bootstrap. Enjoy!