Playing video inline on iOS

It made sense back in the day to be restrictive with videos on our shiny new smartphones; most of us had barely any data allowance with slow connections (the dreaded E). Disabling certain features made sense. These days though, technology has caught up!

Apple has recently relaxed the rules and you can now play a video inline rather than full screen. It’s also possible to have them autoplay (with a small caveat I’ll mentioned later).

Here’s the simplest implementation

<video playsinline>
  <source src="video.mp4">
</video>

This will add a video to the page, as you’d expect, but when the user hits play it will stay on the page rather than go full screen.

You’ll probably notice that the video still wont autoplay however. For that to work, you’ll also need to set your video to be muted. It’s a sensible restriction; nobody likes loud autoplaying anything on the web. Google will be muting videos by default in the next release of Chrome so it’s something we’ll have to get used to dealing with.

Here’s the code

<video playsinline muted>
  <source src="video.mp4">
</video>

If you don’t need audio then it’s even simpler and you don’t need to do much at all. This is perfect for background video elements (our reason for being excited) or animated “gifs”.

Fun fact!

The huge surge in popularity of the animated .gif is one of the biggest reasons this change was made in the first place: Video elements use less CPU intensive and have much smaller file sizes.

On that note, here’s the best way to replicate the behaviour of the trusty animated gif on a web page using a video element.

<video autoplay loop muted playsinline>
  <source src="animation.mp4">
  <img src="animation.gif">
</video>

Hopefully this will save everyone data and battery life as more sites implement this more modern approach.