Leave mobile’s fullscreen mode in HTML5 videos

I was doing some research for a client’s site with a HTML5 video. The issue is that, once the video is played in fullscreen you have to tap somewhere to shoe the “Done” button in iOS and use the “back” button in Android. These behaviour occurs in both Android and iPhone, and is the only way it plays, not like in iPad where it can be played “in-place”.

So, after some research, Apple Developers Center has the solution in the documentation for the DOM Element that represents the video tag, the HTMLVideoElement class.

To leave fullscreen mode you just have to:

document.getElementById('video').webkitExitFullScreen();<br />

And to do it once the video has finished:

document.getElementById('video').addEventListener('ended', function(){<br /> document.getElementById('video').webkitExitFullScreen();<br /> }

Nice and simple.