Home

Awesome

No longer needed :tada:

iOS now supports this natively since v10. So long, and thanks for all the videos!

iphone-inline-video

Make videos playable inline on Safari on iPhone (prevents automatic fullscreen)

gzipped size Travis build status npm version

This enables iOS 10's playsinline attribute on iOS 8 and iOS 9 (almost a polyfill). It lets you:

Demo

Main features

Limitations:

Install

Pick your favorite:

<script src="dist/iphone-inline-video.min.js"></script>
npm install --save iphone-inline-video
var enableInlineVideo = require('iphone-inline-video');
import enableInlineVideo from 'iphone-inline-video';

Usage

You will need:

Done! It will only be enabled on iPhones and iPod Touch devices.

Now you can keep using it just like you would on a desktop. Run video.play(), video.pause(), listen to events with video.addEventListener() or $(video).on(), etc...

BUT you still need user interaction to play the audio, so do something like this:

enableInlineVideo(video);
video.addEventListener('touchstart', function () {
	video.play();
});

If at some point you want to open the video in fullscreen, use the standard (but still prefixed) webkitEnterFullScreen() API, but it has some caveats.

Usage with audio-less videos

If your video file doesn't have an audio track, then must set a muted attribute:

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

Usage with autoplaying videos

The autoplay attribute is also supported, if muted is set:

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

Muted videos can also be played without user interaction — which means that video.play() doesn't need to be called inside an event listener:

<video muted playsinline src="video.mp4"></video>
setTimeout(function () { video.play(); }, 1000); // example

Usage on iPad

The iPad already supports inline videos so IIV is not enabled there.

The only reason to enabled IIV on iPad:

To enabled IIV on the iPad:

enableInlineVideo(video, {
	iPad: true
});

Notes about iOS 10

New features in iOS 10 and iOS 11:

Essentially everything that this module does, so iphone-inline-video will be automatically disabled on iOS 10-11. Make sure you use the playsinline attribute.

License

MIT © Federico Brigante