Stop iOS10 safari auto-locking

I had twitter open the other day and I had to put my phone down and attend to something else, the timeline happened to be on a looping gif video and I noticed when I came back that my phone was still awake and unlocked the fact that video was in view kept the phone awake and this got me thinking about the new playsinline attribute that has been enabled for <video> elements in iOS10 Safari.


<video autoplay loop muted playsinline src="video.mp4" />

Check out the live demo.

The demo uses a base64 encoded mp4 video from Mathias Bynens small repo which makes it around 1.2 – 1.3kb.

playsinline attribute

Finally within iOS10 on an iPhone you can now autoplay a silent video using the new playsinline attribute and avoid the fullscreen player that we’re all used to on iPhones. Check out the webkit blog post on their new <video> policies.

Hiding the video

In order for the phone to stay awake the video needs to be visible and within the viewport so obvious things like positioning off canvas, visibility:hidden and opacity: 0 don’t work. However we can use the following CSS to make it invisible to the human eye but not to the browser and therefore keep the phone from auto-locking.

video {
  position: absolute; // take video out of document flow
  z-index: -1; // position it behind other layers
  opacity: 0.01; // Lowest valid opacity value to make it invisible
  width: 1px; // Reduce default video dimensions to smallest non 0 value
  height: 1px;

Chrome iOS

Chrome seems to have a bug where it won’t actually autoplay the video and therefore will go to sleep as the video isn’t playing to keep it awake. Hit me up on twitter if you know how to fix or why it doesn’t work.

Toggle auto-locking

If anyone wants to run with this you could easily make it start and stop the video via user interaction say you have a timer app you could remove the autoplay attribute and just call play() or pause() on the video to toggle if the phone should sleep or not.

Have fun and don’t abuse this.